next-share
    TypeScript icon, indicating that this package has built-in type declarations

    0.13.0 • Public • Published

    next-share

    Social media share buttons for your next React apps.

    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

    🔧 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

    👨‍💻 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

    📚 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.

    📜 Changelog

    Latest version 0.13.0 (2022-01-22):

    • Resize next share to smaller size

    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

    ⚖️ License

    The MIT License License: MIT

    Install

    npm i next-share

    DownloadsWeekly Downloads

    4,454

    Version

    0.13.0

    License

    MIT

    Unpacked Size

    122 kB

    Total Files

    50

    Last publish

    Collaborators

    • bunlong