React-share-kit NPM

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

If package size is mater and you don't need use share count functionality instead of your React.js, Next.js and PReact project build with Javascript and Typescript. React-share-lite is the solution to enhance your application performance.

React-Share-Kit

Installation

To install React-Share-Kit, simply run:

npm install react-share-kit

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

👨‍💻 Example

import React from 'react';
import { FacebookShare, FacebookCount } 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} />

        <FacebookCount
          url={shareUrl}
          appId='your-app-id'
          appSecret='your-app-secret'
        />

        <FacebookCount
          url={shareUrl}
          appId='your-app-id'
          appSecret='your-app-secret'
        >
          {shareCount => <span className="wrapper">{shareCount}</span>}
        </FacebookCount>
      </>
  );
};

💡 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

Twitter Share

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

Props	Type	Required
via	string	FALSE
hashtags	array	FALSE
related	array	FALSE

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	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			FALSE
body	string			FALSE
separator	string			FALSE
blankTarget	boolean	false	Open share window in a new tab if set to `true`.	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	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}`}
/>

📕 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

Workplace Share

👨‍💻 Example

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

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

📕 Props: Supports only on Workspace

Props	Type	Default	Description	Required
quote	string			FALSE
hashtag	string			FALSE

Pocket Share

👨‍💻 Example

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

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

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	Description	Required
url	string	The URL of the shared page.	TRUE
children	node	React component, HTML element or string.	FALSE
appId	string	Facebook application id.	TRUE
appSecret	string	Facebook application secret.	TRUE

💡 Usage of ShareCount

Facebook Count

👨‍💻 Example

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

<FacebookCount
  url='https://github.com/ayda-tech/react-share-kit'
  appId=''
  appSecret=''
/>

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

📕 Props: Supports only on Facebook count

Props	Type	Default	Description	Required
appId	string		Facebook application id.	TRUE
appSecret	string		Facebook application secret.	TRUE

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 { PinterestShareCount } 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'

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