/next-share

Social media share buttons for your next React apps.

Primary LanguageTypeScriptMIT LicenseMIT

next-share

Social media share buttons for your next React apps.

next-share

NPM npm bundle size Build Status JavaScript Style Guide downloads

🎁 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

🔧 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

🎀 Facebook

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>

🎀 Line

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>

🎀 Pinterest

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>

🎀 Reddit

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.'}
  windowWidth={660}
  windowHeight={460}
>
  <RedditIcon size={32} round />
</RedditShareButton>

🎀 Telegram

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>

🎀 Tumblr

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>

🎀 Twitter

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>

🎀 Viber

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>

🎀 Weibo

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>

🎀 Whatsapp

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>

🎀 Linkedin

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

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

📚 Icons Documentation

📖 Icons Props

Props Type Default Description Required
size number Icon size in pixels. ❌
round boolean false 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. ❌

📚 ShareButtons Documentation

📖 FacebookShareButton Props

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

📖 LineShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 PinterestShareButton Props

Props Type Default Description Required
children React 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 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

📖 RedditShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 TelegramShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 TumblrShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 TwitterShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 ViberShareButton Props

Props Type Default Description Required
children React 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 660 Opened window width. ❌
windowHeight number 460 Opened window height. ❌

📖 WeiboShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 WhatsappShareButton Props

Props Type Default Description Required
children React 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. ❌

📖 LinkedinShareButton Props

Props Type Default Description Required
children React 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 550 Opened window width. ❌
windowHeight number 400 Opened window height. ❌

💖 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

⚖️ License

The MIT License License: MIT