GithubHelp home page GithubHelp logo

olremproj / next-share Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bunlong/next-share

0.0 0.0 0.0 417 KB

Social media share buttons for your next React apps.

License: MIT License

JavaScript 13.68% TypeScript 81.11% CSS 3.27% HTML 1.94%

next-share's Introduction

next-share

Social media share buttons for your next React apps.

downloads downloads

NPM npm bundle size Build Status JavaScript Style Guide

next-share

🎁 Features

  • No dependencies
  • Compatible with both JavaScript and TypeScript
  • Share buttons for your next React app
    • Facebook
    • Line
    • Pinterest
    • Reddit
    • Telegram
    • Tumblr
    • Twitter
    • Viber
    • Weibo
    • Whatsapp
    • Linkedin
    • VKShare
    • Livejournal
    • Workplace
    • Pocket
    • Instapaper
    • Hatena
    • FacebookMessenger
    • Email
    • Gab
  • Share counts
    • FacebookShareCount
    • HatenaShareCount
    • OKShareCount
    • PinterestShareCount
    • TumblrShareCount
    • VKShareCount

🔧 Install

next-share is available on npm. It can be installed with the following command:

npm install next-share --save

next-share is available on yarn as well. It can be installed with the following command:

yarn add next-share --save

💡 Usage of ShareButton

🎀 Facebook

👨‍💻 Code

import {
  FacebookShareButton,
  FacebookIcon,
} from 'next-share';

<FacebookShareButton
  url={'https://github.com/next-share'}
  quote={'next-share is a social share buttons for your next React apps.'}
  hashtag={'#nextshare'}
>
  <FacebookIcon size={32} round />
</FacebookShareButton>

📖 FacebookShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
quote string A quote to be shared. ❌
hashtag string Hashtag to be shared. ❌
windowWidth number 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 FacebookIcon props

🎀 Line

👨‍💻 Code

import {
  LineShareButton,
  LineIcon,
} from 'next-share';

<LineShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <LineIcon />
</LineShareButton>

📖 LineShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
windowWidth number 500 Opened window width. ❌
windowHeight number 500 Opened window height. ❌

📖 LineIcon props

🎀 Pinterest

👨‍💻 Code

import {
  PinterestShareButton,
  PinterestIcon,
} from 'next-share'

<PinterestShareButton
  url={'https://github.com/next-share'}
  media={'next-share is a social share buttons for your next React apps.'}
>
  <PinterestIcon size={32} round />
</PinterestShareButton>

📖 PinterestShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
media string The image URL that will be pinned. ✅
description string The description of the shared media. ❌
windowWidth number 1000 Opened window width. ❌
windowHeight number 730 Opened window height. ❌

📖 PinterestIcon props

🎀 Reddit

👨‍💻 Code

import {
  RedditShareButton,
  RedditIcon,
} from 'next-share'

<RedditShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <RedditIcon size={32} round />
</RedditShareButton>

📖 RedditShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 RedditIcon props

🎀 Telegram

👨‍💻 Code

import {
  TelegramShareButton,
  TelegramIcon,
} from 'next-share'

<TelegramShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TelegramIcon size={32} round />
</TelegramShareButton>

📖 TelegramShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
windowWidth number 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 TelegramIcon props

🎀 Tumblr

👨‍💻 Code

import {
  TumblrShareButton,
  TumblrIcon,
} from 'next-share'

<TumblrShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TumblrIcon size={32} round />
</TumblrShareButton>

📖 TumblrShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
tags Array<string> ❌
caption string The description of the shared page. ❌
posttype string link ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 TumblrIcon props

🎀 Twitter

👨‍💻 Code

import {
  TwitterShareButton,
  TwitterIcon,
} from 'next-share'

<TwitterShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <TwitterIcon size={32} round />
</TwitterShareButton>

📖 TwitterShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
via string ❌
hashtags array ❌
related array ❌
windowWidth number 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 TwitterIcon props

🎀 Viber

👨‍💻 Code

import {
  ViberShareButton,
  ViberIcon,
} from 'next-share'

<ViberShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
>
  <ViberIcon size={32} round />
</ViberShareButton>

📖 ViberShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
separator ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 ViberIcon props

🎀 Weibo

👨‍💻 Code

import {
  WeiboShareButton,
  WeiboIcon,
} from 'next-share'

<WeiboShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
  image={`${String(window.location)}/${example-image}`}
>
  <WeiboIcon size={32} round />
</WeiboShareButton>

📖 WeiboShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
image string The image URL that will be shared. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 550 Opened window height. ❌

📖 WeiboIcon props

🎀 Whatsapp

👨‍💻 Code

import {
  WhatsappShareButton,
  WhatsappIcon,
} from 'next-share'

<WhatsappShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons for your next React apps.'}
  separator=":: "
>
  <WhatsappIcon size={32} round />
</WhatsappShareButton>

📖 WhatsappShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
separator string ❌
windowWidth number 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 WhatsappIcon props

🎀 Linkedin

👨‍💻 Code

import {
  LinkedinShareButton,
  LinkedinIcon,
} from 'next-share'

<LinkedinShareButton url={'https://github.com/next-share'}>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>

📖 LinkedinShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
summary string Description of the shared page. ❌
source string Source of the content (e.g. your website or application name). ❌
windowWidth number 750 Opened window width. ❌
windowHeight number 600 Opened window height. ❌

📖 LinkedinIcon props

🎀 VK

👨‍💻 Code

import {
  VKShareButton,
  VKIcon,
} from 'next-share'

<VKShareButton
  url={'https://github.com/next-share'}
  image={'./next-share.png'}
>
  <VKIcon size={32} round />
</VKShareButton>

📖 VKShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
image string An absolute link to the image that will be shared. ❌
noParse boolean If true is passed, VK will not retrieve URL information. ❌
noVkLinks boolean If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 VKIcon props

🎀 Mailru

👨‍💻 Code

import {
  MailruShareButton,
  MailruIcon,
} from 'next-share'

<MailruShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <MailruIcon size={32} round />
</MailruShareButton>

📖 MailruShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
description string Description of the shared page. ❌
imageUrl string Image url of the shared page. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 MailruIcon props

🎀 Livejournal

👨‍💻 Code

import {
  LivejournalShareButton,
  LivejournalIcon,
} from 'next-share'

<LivejournalShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
  description={'https://github.com/next-share'}
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>

📖 LivejournalShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string The title of the shared page. ❌
description string Description of the shared page. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 LivejournalIcon props

🎀 Workplace

👨‍💻 Code

import {
  WorkplaceShareButton,
  WorkplaceIcon,
} from 'next-share'

<WorkplaceShareButton
  url={'https://github.com/next-share'}
  quote={'Next Share'}
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>

📖 WorkplaceShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
quote string ❌
hashtag string ❌
windowWidth number 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 WorkplaceIcon props

🎀 Pocket

👨‍💻 Code

import {
  PocketShareButton,
  PocketIcon,
} from 'next-share'

<PocketShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <PocketIcon size={32} round />
</PocketShareButton>

📖 PocketShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. ❌
windowWidth number 500 Opened window width. ❌
windowHeight number 500 Opened window height. ❌

📖 PocketIcon props

🎀 Instapaper

👨‍💻 Code

import {
  InstapaperShareButton,
  InstapaperIcon,
} from 'next-share'

<InstapaperShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <InstapaperIcon size={32} round />
</InstapaperShareButton>

📖 InstapaperShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string Title of the shared page. ❌
description string Description of the shared page. ❌
windowWidth number 500 Opened window width. ❌
windowHeight number 500 Opened window height. ❌

📖 InstapaperIcon props

🎀 Hatena

👨‍💻 Code

import {
  HatenaShareButton,
  HatenaIcon,
} from 'next-share'

<HatenaShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <HatenaIcon size={32} round />
</HatenaShareButton>

📖 HatenaShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string Title of the shared page. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 HatenaIcon props

🎀 FacebookMessenger

👨‍💻 Code

import {
  FacebookMessengerShareButton,
  FacebookMessengerIcon,
} from 'next-share'

<FacebookMessengerShareButton
  url={'https://github.com/next-share'}
  appId={''}
>
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>

📖 FacebookMessengerShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
appId string Facebook application id. ✅
redirectUri string The URL to redirect to after sharing (default: the shared url). ❌
to string A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. ❌
windowWidth number 1000 Opened window width. ❌
windowHeight number 820 Opened window height. ❌

📖 FacebookMessengerIcon props

🎀 Email

👨‍💻 Code

import {
  EmailShareButton,
  EmailIcon,
} from 'next-share'

<EmailShareButton
  url={'https://github.com/next-share'}
  subject={'Next Share'}
  body="body"
>
  <EmailIcon size={32} round />
</EmailShareButton>

📖 EmailShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
subject string ❌
body string ❌
separator string ❌

📖 EmailIcon props

🎀 Gab

👨‍💻 Code

import {
  GabShareButton,
  GabIcon,
} from 'next-share'

<GabShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <GabIcon size={32} round />
</GabShareButton>

📖 GabShareButton props

Props Type Default Description Required
children node React component, HTML element or string. ✅
url string The URL of the shared page. ✅
title string Title of the shared page. ❌
windowWidth number 660 Opened window width. ❌
windowHeight number 640 Opened window height. ❌

📖 GabIcon props

📚 Icons props

Props Type Default Description Required
size number Icon size in pixels. ❌
round boolean Show round or rectangle. ❌
borderRadius number Set rounded corners if using round icon. ❌
bgStyle object Customize background style. ❌
iconFillColor string white Customize icon fill color. ❌

💡 Usage of ShareCount

👨‍💻 Code

import {
  FacebookShareCount,
  HatenaShareCount,
  OKShareCount,
  PinterestShareCount,
  TumblrShareCount,
  VKShareCount,
} from 'next-share';

<PinterestShareCount url={'https://github.com/next-share'} />

<PinterestShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</PinterestShareCount>

<FacebookShareCount
  url={'https://github.com/next-share'}
  appId={''}
  appSecret={''}
/>

<FacebookShareCount
  url={'https://github.com/next-share'}
  appId={''}
  appSecret={''}
>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</FacebookShareCount>

📖 FacebookShareCount props

Props Type Default Description Required
url string The URL of the shared page. ✅
appId string Facebook application id. ✅
appSecret string Facebook application secret. ✅
children node React component, HTML element or string. ❌

📜 Changelog

Latest version 0.18.1 (2022-09-01):

  • Update reddit icon color to match current branding

Details changes for each release are documented in the CHANGELOG.md.

💖 Wrap Up

If you think any of the next-share can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to next-share by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

  • Open pull request with improvements
  • Discuss ideas in issues
  • Spread the word
  • Reach out with any feedback

✨ Contributors

Bunlong
Bunlong 		Arturs Kirtovskis
Arturs Kirtovskis 		Sean
Sean 		Steve Scavo
Steve Scavo 		Maddy Miller
Maddy Miller

⚖️ License

The MIT License License: MIT

next-share's People

Contributors

bunlong avatar me4502 avatar stevescavo avatar akirtovskis avatar chella89 avatar helloitsm3 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.