React-Share-Kit

React-Share-Kit is a simple and easy-to-use library for adding social media share buttons to your React & Next applications. With React-Share-Kit, you can quickly integrate share buttons for popular social media platforms such as Facebook, X (formerly Twitter), LinkedIn, and more.

If package size matters and you don't need share counts, react-share-lite is the lightweight alternative.

🚀 What's new in v2.0.0

• React 19 ready — works with React 17, 18 and 19, and with the Next.js App Router (the bundle ships a 'use client' banner).
• New networks — XShare (the canonical X button), BlueskyShare and ThreadsShare.
• Styleable at last — className, style and every other standard button HTML attribute are forwarded to the underlying <button>.
• Dead networks removed — PocketShare and WorkplaceShare are gone (both services were shut down), along with the broken FacebookCount and RedditCount.

See CHANGELOG.md for the full list, including breaking changes.

Requirements: React 17, 18 or 19.

Table of Contents

• React-Share-Kit
  • Table of Contents
  • Installation
  • 📕 Share Button Global Props
  • 💡 Usage of ShareButtons
    • Facebook Share
    • X Share
    • Twitter Share (deprecated)
    • Bluesky Share
    • Threads Share
    • Linkedin Share
    • Whatsapp Share
    • Telegram Share
    • FacebookMessenger Share
    • Email Share
    • VK Share
    • Pinterest Share
    • Reddit Share
    • Line Share
    • Tumblr Share
    • Viber Share
    • Weibo Share
    • Mailru Share
    • LiveJournal Share
    • Instapaper Share
    • Hatena Share
    • Gab Share
  • 📕 Share Count global props
  • 💡 Usage of ShareCount
    • Hatena Count
    • OK Count
    • Pinterest Count
    • Tumblr Count
    • VK Count
  • ❓ FAQ
  • License

Installation

To install React-Share-Kit, simply run:

npm install react-share-kit

or

yarn add react-share-kit

📕 Share Button Global Props

Each button supports a set of global props that are consistent across all buttons. However, in addition to these global props, each button also possesses its own unique set of specific properties. These specific properties are tailored to the individual functionality and customization options of each button.

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | url | string | | The URL of the shared page. | TRUE | | title | string | | The title of the shared page. | FALSE | | windowWidth | number | 550 | Opened window width. | FALSE | | windowHeight | number | 400 | Opened window height. | FALSE | | blankTarget | boolean | false | Open share window in a new tab if set to true. | FALSE | | bgColor | string | related color | Icon background color. | FALSE | | round | boolean | false | The "round" attribute creates a fully circular button shape, giving it a 100% rounded appearance. | FALSE | | borderRadius | number | 0px | Custom round share. | FALSE | | size | number | 64px | The button size. | FALSE | | buttonTitle | string | | The title of button used instead of icon. | FALSE | | disabled | boolean | false | Disables the button click and applies disabledStyle. | FALSE | | disabledStyle | CSSProperties | { opacity: 0.6 } | Style applied to the button while it is disabled. | FALSE | | style | CSSProperties | | Custom style of the underlying <button> element. | FALSE | | iconStyle | CSSProperties | | Custom style of the icon SVG. | FALSE | | iconFillColor | string | | Fill color of the icon path. | FALSE | | windowPosition | windowCenter | screenCenter | windowCenter | Position of the share popup window. | FALSE | | openShareDialogOnClick | boolean | true | Open the share dialog on click. | FALSE | | onClick | function | | (event, link) => void called on click, after the share dialog is handled. | FALSE | | beforeOnClick | function | | Takes a function that returns a Promise to be fulfilled before opening the share dialog. | FALSE | | onShareWindowClose | function | | Takes a function to be called after closing the share dialog. | FALSE | | resetButtonStyle | boolean | true | Reset the browser's default button styles. | FALSE |

🎨 Styling: all standard button HTML attributes (className, style, aria-*, data-*, event handlers, ...) are forwarded to the underlying <button> element, so you can style the buttons with your own CSS classes.

👨‍💻 Example

import React from 'react';
import { FacebookShare, XShare, PinterestCount } from 'react-share-kit';

const ShareButtons = () => {
  const shareUrl = 'https://github.com/ayda-tech/react-share-kit';
  const title = 'Check out this awesome website!';

  return (
      <>
        <FacebookShare url={shareUrl} quote={title} />

        <XShare url={shareUrl} title={title} className="my-share-button" />

        <PinterestCount url={shareUrl} />

        <PinterestCount url={shareUrl}>
          {shareCount => <span className="wrapper">{shareCount}</span>}
        </PinterestCount>
      </>
  );
};

💡 Usage of ShareButtons

Facebook Share

👨‍💻 Example

import { FacebookShare } from 'react-share-kit'

<FacebookShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  quote={'react-share-kit - social share buttons for next & react apps.'}
  hashtag={'#react-share-kit'}
/>

📕 Props: Supports only on Facebook

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | quote | string | | A quote to be shared. | FALSE | | hashtag | string | | Hashtag to be shared. | FALSE |

X Share

👨‍💻 Example

import { XShare } from 'react-share-kit'

<XShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
  hashtags={['react-share-kit', 'front-end']}
/>

📕 Props: Supports only on X

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | via | string | | X username to attribute the post to (without @). | FALSE | | hashtags | Array<string> | | Hashtags to include in the post (without #). | FALSE | | related | Array<string> | | Accounts to suggest following after the post is sent. | FALSE |

Twitter Share (deprecated)

⚠️ Deprecated: Twitter is now X. TwitterShare is kept as an alias of XShare — it renders the X logo and opens x.com/intent/post — but you should use XShare in new code.

👨‍💻 Example

import { TwitterShare } from 'react-share-kit'

<TwitterShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
  hashtags={['react-share-kit', 'front-end']}
/>

📕 Props: Same as X Share.

Bluesky Share

👨‍💻 Example

import { BlueskyShare } from 'react-share-kit'

<BlueskyShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
  separator=":: "
/>

📕 Props: Supports only on Bluesky

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | separator | string | | Separator between the title and the URL. | FALSE |

Threads Share

👨‍💻 Example

import { ThreadsShare } from 'react-share-kit'

<ThreadsShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
/>

Linkedin Share

👨‍💻 Example

import { LinkedinShare } from 'react-share-kit'

<LinkedinShare url={'https://github.com/ayda-tech/react-share-kit'} />

Whatsapp Share

👨‍💻 Example

import { WhatsappShare } from 'react-share-kit'

<WhatsappShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
  separator=":: "
/>

📕 Props: Supports only on WhatsApp

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | separator | string | | | FALSE |

Telegram Share

👨‍💻 Example

import { TelegramShare } from 'react-share-kit'

<TelegramShare url={'https://github.com/ayda-tech/react-share-kit'} />

FacebookMessenger Share

👨‍💻 Example

import { FacebookMessengerShare } from 'react-share-kit'

<FacebookMessengerShare
  url='https://github.com/ayda-tech/react-share-kit'
  redirectUri="https://github.com/ayda-tech/react-share-kit"
  appId={'dmm4kj9djk203k4liuf994p'}
/>

📕 Props: Supports only on Facebook Messenger

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | appId | string | | Facebook application id. | TRUE | | redirectUri | string | | The URL to redirect to after sharing (default: the shared url). | FALSE | | to | string | | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | FALSE |

Email Share

👨‍💻 Example

import { EmailShare } from 'react-share-kit'

<EmailShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  subject={'React Share Kit'}
  body="body"
/>

📕 Props: Supports only on Email

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | subject | string | | The subject line of the email. | FALSE | | body | string | | The body content of the email; the URL is appended to it. | FALSE | | separator | string | | Separator between the body and the URL. | FALSE |

VK Share

👨‍💻 Example

import { VKShare } from 'react-share-kit'

<VKShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  image={'./react-share.png'}
/>

📕 Props: Supports only on VK

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | image | string | | An absolute link to the image that will be shared. | FALSE | | noParse | boolean | | If true is passed, VK will not retrieve URL information. | FALSE | | noVkLinks | boolean | | If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices. | FALSE |

Pinterest Share

👨‍💻 Example

import { PinterestShare } from 'react-share-kit'

<PinterestShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  media={'react-share-kit - social share buttons for next & react apps.'}
/>

📕 Props: Supports only on Pinterest

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | media | string | | The image URL that will be pinned. | TRUE | | description | string | | The description of the shared media. | FALSE |

Reddit Share

👨‍💻 Example

import { RedditShare } from 'react-share-kit'

<RedditShare url={'https://github.com/ayda-tech/react-share-kit'} />

Line Share

👨‍💻 Example

import { LineShare } from 'react-share-kit'

<LineShare url={'https://github.com/ayda-tech/react-share-kit'} />

Tumblr Share

👨‍💻 Example

import { TumblrShare } from 'react-share-kit'

<TumblrShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  caption="react-share-kit - social share buttons for next & react apps."
/>

📕 Props: Supports only on Tumblr

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | tags | Array<string> | | | FALSE | | caption | string | | The description of the shared page. | FALSE | | posttype | string | link | | FALSE |

Viber Share

👨‍💻 Example

import { ViberShare } from 'react-share-kit'

<ViberShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
/>

📕 Props: Supports only on Viber

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | separator | string | | | FALSE |

Weibo Share

👨‍💻 Example

import { WeiboShare } from 'react-share-kit'

<WeiboShare
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'react-share-kit - social share buttons for next & react apps.'}
  image={`${String(window.location)}/example-image.png`}
/>

📕 Props: Supports only on Weibo

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | image | string | | The image URL that will be shared. | FALSE |

Mailru Share

👨‍💻 Example

import { MailruShare } from 'react-share-kit'

<MailruShare url={'https://github.com/ayda-tech/react-share-kit'} />

📕 Props: Supports only on Mail-Ru

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | description | string | | Description of the shared page. | FALSE | | imageUrl | string | | Image url of the shared page. | FALSE |

LiveJournal Share

👨‍💻 Example

import { LiveJournalShare } from 'react-share-kit'

<LiveJournalShare url={'https://github.com/ayda-tech/react-share-kit'} />

📕 Props: Supports only on Live Journal

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | description | string | | Description of the shared page. | FALSE |

Instapaper Share

👨‍💻 Example

import { InstapaperShare } from 'react-share-kit'

<InstapaperShare url={'https://github.com/ayda-tech/react-share-kit'} />

📕 Props: Supports only on Instapaper

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | description | string | | Description of the shared page. | FALSE |

Hatena Share

👨‍💻 Example

import { HatenaShare } from 'react-share-kit'

<HatenaShare url={'https://github.com/ayda-tech/react-share-kit'} />

Gab Share

👨‍💻 Example

import { GabShare } from 'react-share-kit'

<GabShare url={'https://github.com/ayda-tech/react-share-kit'} />

📕 Share Count global props

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | url | string | | The URL of the shared page. | TRUE | | children | node | | React component, HTML element or string. | FALSE |

💡 Usage of ShareCount

⚠️ The count components use the networks' legacy public count endpoints, which work today but are unofficial and can disappear without notice.

Hatena Count

👨‍💻 Example

import { HatenaCount } from 'react-share-kit'

<HatenaCount url={'https://github.com/ayda-tech/react-share-kit'} />

<HatenaCount url={'https://github.com/ayda-tech/react-share-kit'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</HatenaCount>

OK Count

👨‍💻 Example

import { OKCount } from 'react-share-kit'

<OKCount url={'https://github.com/ayda-tech/react-share-kit'} />

<OKCount url={'https://github.com/ayda-tech/react-share-kit'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</OKCount>

Pinterest Count

👨‍💻 Example

import { PinterestCount } from 'react-share-kit'

<PinterestCount url={'https://github.com/ayda-tech/react-share-kit'} />

<PinterestCount url={'https://github.com/ayda-tech/react-share-kit'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</PinterestCount>

Tumblr Count

👨‍💻 Example

import { TumblrCount } from 'react-share-kit'

<TumblrCount url={'https://github.com/ayda-tech/react-share-kit'} />

<TumblrCount url={'https://github.com/ayda-tech/react-share-kit'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</TumblrCount>

VK Count

👨‍💻 Example

import { VKCount } from 'react-share-kit'

<VKCount url={'https://github.com/ayda-tech/react-share-kit'} />

<VKCount url={'https://github.com/ayda-tech/react-share-kit'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</VKCount>

❓ FAQ

Why doesn't my shared link show an image preview?

Link previews are generated from the Open Graph / Twitter Card meta tags of the shared page, not by this library. The share buttons only pass the URL to the network; the network then crawls that URL for its preview. Add og:image, og:title, og:description (and, for X, the twitter:card tags) to the <head> of the page you are sharing.

License

React-Share-Kit is licensed under the MIT License. See the LICENSE file for more details.