react-share-lite

v2.0.0

Published

a month ago

Social media share buttons for React, Nextjs and Preact applications.

React-Share-Lite

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

react-share-lite ships share buttons only — it does not include share-count components. If you want share count functionality in your React, Next.js, or Preact projects built with JavaScript and TypeScript, react-share-kit is the solution. It seamlessly enhances your applications, allowing users to easily track the popularity of your content.

✨ What's new in v2.0.0

⚛️ React 19 ready — works with React 17, 18 and 19, including Next.js App Router server components.
🆕 New networks: XShare (the canonical X/Twitter button), BlueskyShare and ThreadsShare.
🎨 Styleable at last — className, style and all other standard button attributes are forwarded to the underlying <button>.
🧹 Dead networks removed: PocketShare (Pocket was shut down in July 2025) and WorkplaceShare (Meta Workplace was discontinued).

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

Requirements: React 17, 18 or 19.

Installation

To install react-share-lite, simply run:

npm install react-share-lite

yarn add react-share-lite

📕 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 | :--------------------- | url | string | title | string | windowWidth | number | windowHeight | number | windowPosition | string | blankTarget | boolean | bgColor | string | round | boolean | borderRadius | number | size | number | buttonTitle | string | style | CSSProperties | | iconStyle | CSSProperties | | iconFillColor | string | disabled | boolean | disabledStyle | openShareDialogOnClick | boolean | onClick | function | beforeOnClick | function | onShareWindowClose | function | resetButtonStyle | boolean | forwardedRef | Ref | Default | Description | Required | | :------------ | :--------------- | :------------------------------------------------------------------------------------------------ | :------- | | | The URL of the shared page. | TRUE | | | The title of the shared page. | FALSE | | 550 | Opened window width. | FALSE | | 400 | Opened window height. | FALSE | | windowCenter | Position of the share window: windowCenter or screenCenter. | FALSE | | false | Open share window in a new tab if set to true (opened with noopener,noreferrer). | FALSE | | related color | Icon background color. | FALSE | | false | The "round" attribute creates a fully circular button shape, giving it a 100% rounded appearance. | FALSE | | 0px | Custom round share. | FALSE | | 64px | The button size. | FALSE | | | The title of button used instead of icon. | FALSE | | Custom style for the underlying button element. | FALSE | | Custom style for the icon. | FALSE | | | Icon fill color. | FALSE | | false | Disables the click action and applies disabledStyle. | FALSE | | CSSProperties | { opacity: 0.6 } | Style applied to the button when disabled is true. | FALSE | | true | Open the share dialog on click. | FALSE | | | Custom click handler, called with (event, shareLink). | FALSE | | | Takes a function that returns a Promise to be fulfilled before opening the share dialog. | FALSE | | | Takes a function to be called after closing the share dialog. | FALSE | | true | Set to false to keep the browser's default button styling. | FALSE | | | Ref forwarded to the underlying button element. | FALSE |

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

<FacebookShare url={shareUrl} className="my-share-button" data-testid="fb-share" />

👨‍💻 Example

import React from 'react'
import { FacebookShare } from 'react-share-lite'

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

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

💡 Usage of ShareButtons

Facebook Share

👨‍💻 Example

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

📕 Props: Supports only on Facebook

X Share

👨‍💻 Example

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

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

📕 Props: Supports only on X

Twitter Share (Deprecated)

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

👨‍💻 Example

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

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

📕 Props: Same as X Share.

Bluesky Share

👨‍💻 Example

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

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

📕 Props: Supports only on Bluesky

Threads Share

👨‍💻 Example

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

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

Linkedin Share

👨‍💻 Example

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

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

Whatsapp Share

👨‍💻 Example

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

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

📕 Props: Supports only on WhatsApp

Telegram Share

👨‍💻 Example

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

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

FacebookMessenger Share

👨‍💻 Example

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

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

📕 Props: Supports only on Facebook Messenger

Email Share

👨‍💻 Example

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

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

📕 Props: Supports only on Email

VK Share

👨‍💻 Example

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

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

📕 Props: Supports only on VK

Pinterest Share

👨‍💻 Example

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

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

📕 Props: Supports only on Pinterest

Reddit Share

👨‍💻 Example

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

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

Line Share

👨‍💻 Example

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

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

Tumblr Share

👨‍💻 Example

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

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

📕 Props: Supports only on Tumblr

Viber Share

👨‍💻 Example

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

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

📕 Props: Supports only on Viber

Weibo Share

👨‍💻 Example

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

<WeiboShare
  url={'https://github.com/ayda-tech/react-share-lite'}
  title={'react-share-lite - social share buttons for next & react apps.'}
  image={'https://github.com/ayda-tech/react-share-lite/blob/main/react-share-lite.png?raw=true'}
/>

📕 Props: Supports only on Weibo

Mailru Share

👨‍💻 Example

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

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

📕 Props: Supports only on Mail-Ru

LiveJournal Share

👨‍💻 Example

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

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

📕 Props: Supports only on Live Journal

Instapaper Share

👨‍💻 Example

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

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

📕 Props: Supports only on Instapaper

Hatena Share

👨‍💻 Example

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

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

Gab Share

👨‍💻 Example

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

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

FAQ

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

Link previews (image, title, description) are generated by the social network from the Open Graph / Twitter Card meta tags of the shared page itself — not by this library. If a preview is missing or wrong, add the proper og:* / twitter:* meta tags to the page you are sharing.

License

react-share-lite is licensed under the MIT License. See the LICENSE file for more details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React-Share-Lite

✨ What's new in v2.0.0

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

FAQ

License