react-share-kit

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.

Table of Contents

• Installation
• 🔥 Share Buttons Detault Props
• 💡 Usage of ShareButtons
  • Linkedin
  • Twitter
  • Facebook
  • FacebookMessenger
  • Whatsapp
  • Telegram
  • Line
  • Pinterest
  • Reddit
  • Tumblr
  • Viber
  • Weibo
  • VK
  • Mailru
  • LiveJournal
  • Workplace
  • Pocket
  • Instapaper
  • Hatena
  • Gab
• 💡 Usage of ShareCount
  • Facebook
  • Hatena
  • OK
  • Pinterest
  • Tumblr
  • VK
• License

Installation

To install React-Share-Kit, simply run:

npm install react-share-kit

or

yarn add react-share-kit

🔥 Share Buttons Detault Props

To use React-Share-Kit in your React application, import the necessary components and pass the relevant props to customize the share buttons. For example:

👨‍💻 Example

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

const ShareButtons = () => {
  const shareUrl = 'https://example.com';
  const title = 'Check out this awesome website!';

  return (
      <FacebookShare url={shareUrl} quote={title} />
      <TwitterShare url={shareUrl} round title="X" />
  );
};

📕 Default Props

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

💡 Usage of ShareButtons

Linkedin

👨‍💻 Example

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

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

Twitter

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

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

Facebook

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

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

FacebookMessenger

👨‍💻 Example

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

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

📕 Props

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

Whatsapp

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

Props	Type	Default	Description	Required
separator	string			FALSE

Telegram

👨‍💻 Example

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

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

Line

👨‍💻 Example

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

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

Pinterest

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

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

👨‍💻 Example

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

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

Tumblr

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

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

Viber

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

Props	Type	Default	Description	Required
separator	string			FALSE

Weibo

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

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

VK

👨‍💻 Example

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

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

📕 Props

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

Mailru

👨‍💻 Example

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

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

📕 Props

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

LiveJournal

👨‍💻 Example

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

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

📕 Props

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

Workplace

👨‍💻 Example

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

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

📕 Props

Props	Type	Default	Description	Required
quote	string			FALSE
hashtag	string			FALSE

Pocket

👨‍💻 Example

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

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

Instapaper

👨‍💻 Example

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

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

📕 Props

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

Hatena

👨‍💻 Example

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

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

Gab

👨‍💻 Example

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

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

💡 Usage of ShareCount

Facebook

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

Props	Type	Default	Description	Required
url	string		The URL of the shared page.	TRUE
appId	string		Facebook application id.	TRUE
appSecret	string		Facebook application secret.	TRUE
children	node		React component, HTML element or string.	FALSE

Hatena

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

📕 Props

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

OK

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

📕 Props

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

Pinterest

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

📕 Props

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

Tumblr

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

📕 Props</b

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

VK

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

📕 Props

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

License

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