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

• React-Share-Kit
  • Table of Contents
  • Installation
  • 💡 Usage of ShareButtons
    • Facebook
    • Line
    • Pinterest
    • Reddit
    • Telegram
    • Tumblr
    • Twitter
    • Viber
    • Weibo
    • Whatsapp
    • Linkedin
    • VK
    • Mailru
    • Livejournal
    • Workplace
    • Pocket
    • Instapaper
    • Hatena
    • FacebookMessenger
    • Email
    • Gab
  • 💡 Usage of ShareCount
    • Facebook
    • Hatena
    • OK
    • Pinterest
    • Tumblr
    • VK
  • Documentation
  • License

Installation

To install React-Share-Kit, simply run:

npm install react-share-kit

or

yarn add react-share-kit

💡 Usage of ShareButtons

Facebook

👨‍💻 Code

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

<FacebookShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  quote={'react-share-kit is a social share buttons for your next React apps.'}
  hashtag={'#ReachShareKit'}
  round
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
quote	string		A quote to be shared.	❌
hashtag	string		Hashtag to be shared.	❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Line

👨‍💻 Code

import {
  LineShareButton
} from 'next-share-kit'

<LineShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
windowWidth	number	500	Opened window width.	❌
windowHeight	number	500	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Pinterest

👨‍💻 Code

import {
  PinterestShareButton
} from 'next-share-kit'

<PinterestShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  media={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
media	string		The image URL that will be pinned.	✅
description	string		The description of the shared media.	❌
windowWidth	number	1000	Opened window width.	❌
windowHeight	number	730	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string	64px	The title of button used instead of icon.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Reddit

👨‍💻 Code

import {
  RedditShareButton
} from 'next-share-kit'

<RedditShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Telegram

👨‍💻 Code

import {
  TelegramShareButton
} from 'next-share-kit'

<TelegramShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Tumblr

👨‍💻 Code

import {
  TumblrShareButton
} from 'next-share-kit'

<TumblrShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
tags	Array<string>			❌
caption	string		The description of the shared page.	❌
posttype	string	link		❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Twitter

👨‍💻 Code

import {
  TwitterShareButton
} from 'next-share-kit'

<TwitterShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
via	string			❌
hashtags	array			❌
related	array			❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Viber

👨‍💻 Code

import {
  ViberShareButton
} from 'next-share-kit'

<ViberShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
separator				❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Weibo

👨‍💻 Code

import {
  WeiboShareButton
} from 'next-share-kit'

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
image	string		The image URL that will be shared.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	550	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Whatsapp

👨‍💻 Code

import {
  WhatsappShareButton
} from 'next-share-kit'

<WhatsappShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'next-share-kit is a social share buttons for your next React apps.'}
  separator=":: "
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
separator	string			❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Linkedin

👨‍💻 Code

import {
  LinkedinShareButton
} from 'next-share-kit'

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
windowWidth	number	750	Opened window width.	❌
windowHeight	number	600	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

VK

👨‍💻 Code

import {
  VKShareButton
} from 'next-share-kit'

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
image	string		An absolute link to the image that will be shared.	❌
noParse	boolean		If true is passed, VK will not retrieve URL information.	❌
noVkLinks	boolean		If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Mailru

👨‍💻 Code

import {
  MailruShareButton
} from 'next-share-kit'

<MailruShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
description	string		Description of the shared page.	❌
imageUrl	string		Image url of the shared page.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Livejournal

👨‍💻 Code

import {
  LivejournalShareButton
} from 'next-share-kit'

<LivejournalShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
  description={'https://github.com/ayda-tech/react-share-kit'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		The title of the shared page.	❌
description	string		Description of the shared page.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Workplace

👨‍💻 Code

import {
  WorkplaceShareButton
} from 'next-share-kit'

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
quote	string			❌
hashtag	string			❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Pocket

👨‍💻 Code

import {
  PocketShareButton
} from 'next-share-kit'

<PocketShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead.	❌
windowWidth	number	500	Opened window width.	❌
windowHeight	number	500	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Instapaper

👨‍💻 Code

import {
  InstapaperShareButton
} from 'next-share-kit'

<InstapaperShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		Title of the shared page.	❌
description	string		Description of the shared page.	❌
windowWidth	number	500	Opened window width.	❌
windowHeight	number	500	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Hatena

👨‍💻 Code

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

<HatenaShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		Title of the shared page.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

FacebookMessenger

👨‍💻 Code

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

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
appId	string		Facebook application id.	✅
redirectUri	string		The URL to redirect to after sharing (default: the shared url).	❌
to	string		A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients.	❌
windowWidth	number	1000	Opened window width.	❌
windowHeight	number	820	Opened window height.	❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Email

👨‍💻 Code

import {
  EmailShareButton
} from 'next-share-kit'

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

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
subject	string			❌
body	string			❌
separator	string			❌
blankTarget	boolean	false	Open share window in a new tab if set to true.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

Gab

👨‍💻 Code

import {
  GabShareButton,
} from 'next-share-kit'

<GabShareButton
  url={'https://github.com/ayda-tech/react-share-kit'}
  title={'Next Share'}
/>

📖 Props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
title	string		Title of the shared page.	❌
windowWidth	number	660	Opened window width.	❌
windowHeight	number	640	Opened window height.	❌
bgColor	string	related color	It used for button background color.	❌
round	boolean	false	Open share window in a new tab if set to true.	❌
size	number	64px	The button size.	❌
buttonTitle	string		The title of button used instead of icon.	❌

💡 Usage of ShareCount

Facebook

👨‍💻 Code

import { FacebookShareCount } from 'next-share-kit'

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

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

📖 Props

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

Hatena

👨‍💻 Code

import { HatenaShareCount } from 'next-share-kit'

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

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

📖 Props

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

OK

👨‍💻 Code

import { OKShareCount } from 'next-share-kit'

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

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

📖 Props

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

Pinterest

👨‍💻 Code

import { PinterestShareCount } from 'next-share-kit'

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

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

📖 Props

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

Tumblr

👨‍💻 Code

import { TumblrShareCount } from 'next-share-kit'

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

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

📖 Props

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

VK

👨‍💻 Code

import { VKShareCount } from 'next-share-kit'

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

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

📖 Props

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

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:

import React from 'react';
import { FacebookShareButton, TwitterShareButton } from 'react-share-kit';

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

  return (
      <FacebookShareButton url={shareUrl} quote={title} />
  );
};

Documentation

For more information on how to use React-Share-Kit, including a full list of available share buttons and their props, please refer to the official documentation.

License

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