next-share

next-share is a social share buttons plugin for Next.js, Create React App, Gatsby.js as well as React apps.

🎁 Features

Compatible with both JavaScript and TypeScript
Next Share Buttons and Next Share Icons
- Facebook
- Line
- Pinterest
- Reddit
- Telegram
- Tumblr
- Twitter
- Viber
- Weibo
- Whatsapp

🔧 Install

next-share is available on npm. It can be installed with the following command:

npm install next-share --save

next-share is available on yarn as well. It can be installed with the following command:

yarn add next-share

💡 Usage

🎀 Facebook

import {
  FacebookShareButton,
  FacebookIcon,
} from 'next-share'

<FacebookShareButton
  url={'https://github.com/next-share'}
  quote={'next-share is a social share buttons plugin for React apps.'}
  hashtag={'#nextshare'}
>
  <FacebookIcon />
</FacebookShareButton>

🎀 Line

import {
  LineShareButton,
  LineIcon,
} from 'next-share'

<LineShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
>
  <LineIcon />
</LineShareButton>

🎀 Pinterest

import {
  PinterestShareButton,
  PinterestIcon,
} from 'next-share'

<PinterestShareButton
  url={'https://github.com/next-share'}
  media={'next-share is a social share buttons plugin for React apps.'}
>
  <PinterestIcon size={32} round />
</PinterestShareButton>

🎀 Reddit

import {
  RedditShareButton,
  RedditIcon,
} from 'next-share'

<RedditShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
  windowWidth={660}
  windowHeight={460}
>
  <RedditIcon size={32} round />
</RedditShareButton>

🎀 Telegram

import {
  TelegramShareButton,
  TelegramIcon,
} from 'next-share'

<TelegramShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
>
  <TelegramIcon size={32} round />
</TelegramShareButton>

🎀 Telegram

import {
  TumblrShareButton,
  TumblrIcon,
} from 'next-share'

<TumblrShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
>
  <TumblrIcon size={32} round />
</TumblrShareButton>

🎀 Twitter

import {
  TwitterShareButton,
  TwitterIcon,
} from 'next-share'

<TwitterShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
>
  <TwitterIcon size={32} round />
</TwitterShareButton>

🎀 Viber

import {
  ViberShareButton,
  ViberIcon,
} from 'next-share'

<ViberShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
>
  <ViberIcon size={32} round />
</ViberShareButton>

🎀 Weibo

import {
  WeiboShareButton,
  WeiboIcon,
} from 'next-share'

<WeiboShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
  image={`${String(window.location)}/${example-image}`}
>
  <WeiboIcon size={32} round />
</WeiboShareButton>

🎀 Whatsapp

import {
  WhatsappShareButton,
  WhatsappIcon,
} from 'next-share'

<WhatsappShareButton
  url={'https://github.com/next-share'}
  title={'next-share is a social share buttons plugin for React apps.'}
  separator=":: "
>
  <WhatsappIcon size={32} round />
</WhatsappShareButton>

📚 Icons Documentation

📖 Icons Props

Props	Type	Default	Description	Required
size	number		Icon size in pixels.	❌
round	boolean	false	Show round or rectangle.	❌
borderRadius	number		Set rounded corners if using round icon.	❌
bgStyle	object		Customize background style.	❌
iconFillColor	string	`white`	Customize icon fill color.	❌

📚 ShareButtons Documentation

📖 FacebookShareButton Props

Props	Type	Default	Description	Required
children	React node		React component, HTML element or string.	✅
url	string		The URL of the shared page.	✅
quote	string		A quote to be shared.	❌
hashtag	string			❌
windowWidth	number	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌

📖 LineShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 PinterestShareButton Props

Props	Type	Default	Description	Required
children	React 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	550	Opened window width.	❌
windowHeight	number	400	Opened window height.	❌

📖 RedditShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 TelegramShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 TumblrShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 TwitterShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 ViberShareButton Props

Props	Type	Default	Description	Required
children	React 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	660	Opened window width.	❌
windowHeight	number	460	Opened window height.	❌

📖 WeiboShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

📖 WhatsappShareButton Props

Props	Type	Default	Description	Required
children	React 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.	❌

💖 Wrap Up

If you think any of the next-share can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to next-share by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

Open pull request with improvements
Discuss ideas in issues
Spread the word
Reach out with any feedback

⚖️ License

The MIT License

willvlad / next-share Goto Github PK

next-share's Introduction

next-share

🎁 Features

🔧 Install

💡 Usage

🎀 Facebook

🎀 Line

🎀 Pinterest

🎀 Reddit

🎀 Telegram

🎀 Telegram

🎀 Twitter

🎀 Viber

🎀 Weibo

🎀 Whatsapp

📚 Icons Documentation

📖 Icons Props

📚 ShareButtons Documentation

📖 FacebookShareButton Props

📖 LineShareButton Props

📖 PinterestShareButton Props

📖 RedditShareButton Props

📖 TelegramShareButton Props

📖 TumblrShareButton Props

📖 TwitterShareButton Props

📖 ViberShareButton Props

📖 WeiboShareButton Props

📖 WhatsappShareButton Props

💖 Wrap Up

🌟 Contribution

⚖️ License

next-share's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org