❤
npm
Sign UpSign In

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

1.1.0 • Public • Published

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, Twitter, LinkedIn, and more.

If you want to add share count functionality to your share buttons 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.

downloads downloads

NPM npm bundle size JavaScript Style Guide

Share buttons screenshot

Table of Contents

Installation

To install react-share-lite, simply run:

npm install react-share-lite

or

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

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

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

Twitter Share

👨‍💻 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: Supports only on Twitter

Props Type Default Description Required
via string A screen name to associate with the Tweet. FALSE
hashtags array A comma-separated list of hashtags to be appended to default Tweet text. FALSE
related array A comma-separated list of accounts related to the content of the shared URI. FALSE

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

Props Type Default Description Required
separator string FALSE

Telegram Share

👨‍💻 Example

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

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

FacebookMessenger Share

👨‍💻 Example

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

<FacebookMessengerShareButton
  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

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 'next-share'

<EmailShare
  url={'https://github.com/next-share'}
  subject={'Next Share'}
  body="body"
/>

📕 Props: Supports only on Email

Props Type Default Description Required
children node React component, HTML element or string. TRUE
url string The URL of the shared page. TRUE
subject string The subject of the email. FALSE
body string The body of the email. FALSE
separator string A separator to be shared. FALSE
blankTarget boolean false Open share window in a new tab if set to true. FALSE

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

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

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

Props Type Default Description Required
tags Array<string> An array of tags to be shared. FALSE
caption string The description of the shared page. FALSE
posttype string link The type of the post. FALSE

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

Props Type Default Description Required
separator string FALSE

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={`${String(window.location)}/${example - image}`}
/>

📕 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-lite'

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

📕 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-lite'

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

📕 Props: Supports only on Live Journal

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

Workplace Share

👨‍💻 Example

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

<WorkplaceShare
  url={'https://github.com/ayda-tech/react-share-lite'}
  quote={'React Share Lite'}
/>

📕 Props: Supports only on Workspace

Props Type Default Description Required
quote string A quote to be shared. FALSE
hashtag string Hashtags to be shared. FALSE

Pocket Share

👨‍💻 Example

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

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

Instapaper Share

👨‍💻 Example

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

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

📕 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-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'} />

License

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

Readme

Keywords

Package Sidebar

Install

npm i react-share-lite

Repository

github.com/ayda-tech/react-share-lite

Homepage

react-share-lite.vercel.app/

Weekly Downloads

191

Version

1.1.0

License

MIT

Unpacked Size

127 kB

Total Files

34

Last publish

Collaborators

  • ahmadjoya
Try on RunKit
Report malware