npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

next-share

v0.27.0

Published

Social media share buttons for your next React apps.

Downloads

138,637

Readme

next-share

Social media share buttons for your next React apps.

downloads downloads

NPM npm bundle size Build Status JavaScript Style Guide

🎁 Features

  • No dependencies
  • Compatible with both JavaScript and TypeScript
  • Share buttons for your next React app
    • Facebook
    • Line
    • Pinterest
    • Reddit
    • Telegram
    • Tumblr
    • Twitter
    • Viber
    • Weibo
    • Whatsapp
    • Linkedin
    • VKShare
    • Mailru
    • Livejournal
    • Workplace
    • Pocket
    • Instapaper
    • Hatena
    • FacebookMessenger
    • Email
    • Gab
  • Share counts
    • FacebookShareCount
    • HatenaShareCount
    • OKShareCount
    • PinterestShareCount
    • TumblrShareCount
    • VKShareCount
  • Icons

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

💡 Usage of ShareButton

🎀 Facebook

👨‍💻 Code

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

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

📖 FacebookShareButton 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. | ❌ |

📖 FacebookIcon Props

🎀 Line

👨‍💻 Code

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

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

📖 LineShareButton 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. | ❌ |

📖 LineIcon props

🎀 Pinterest

👨‍💻 Code

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

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

📖 PinterestShareButton 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. | ❌ |

📖 PinterestIcon Props

🎀 Reddit

👨‍💻 Code

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

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

📖 RedditShareButton 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. | ❌ |

📖 RedditIcon Props

🎀 Telegram

👨‍💻 Code

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

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

📖 TelegramShareButton 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. | ❌ |

📖 TelegramIcon Props

🎀 Tumblr

👨‍💻 Code

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

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

📖 TumblrShareButton 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. | ❌ |

📖 TumblrIcon Props

🎀 Twitter

👨‍💻 Code

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

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

📖 TwitterShareButton 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. | ❌ |

📖 TwitterIcon Props

🎀 Viber

👨‍💻 Code

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

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

📖 ViberShareButton 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. | ❌ |

📖 ViberIcon Props

🎀 Weibo

👨‍💻 Code

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

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

📖 WeiboShareButton 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. | ❌ |

📖 WeiboIcon Props

🎀 Whatsapp

👨‍💻 Code

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

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

📖 WhatsappShareButton 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. | ❌ |

📖 WhatsappIcon Props

🎀 Linkedin

👨‍💻 Code

import {
  LinkedinShareButton,
  LinkedinIcon,
} from 'next-share'

<LinkedinShareButton url={'https://github.com/next-share'}>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>

📖 LinkedinShareButton 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. | ❌ |

How do you use things like title, summary, etc.?

Use og tags in the <head> block of the HTML.

<meta property='og:image' content='' />
<meta property='og:title' content='' />
<meta property='og:description' content='' />

📖 LinkedinIcon Props

🎀 VK

👨‍💻 Code

import {
  VKShareButton,
  VKIcon,
} from 'next-share'

<VKShareButton
  url={'https://github.com/next-share'}
  image={'./next-share.png'}
>
  <VKIcon size={32} round />
</VKShareButton>

📖 VKShareButton 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. | ❌ |

📖 VKIcon Props

🎀 Mailru

👨‍💻 Code

import {
  MailruShareButton,
  MailruIcon,
} from 'next-share'

<MailruShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <MailruIcon size={32} round />
</MailruShareButton>

📖 MailruShareButton 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. | ❌ |

📖 MailruIcon Props

🎀 Livejournal

👨‍💻 Code

import {
  LivejournalShareButton,
  LivejournalIcon,
} from 'next-share'

<LivejournalShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
  description={'https://github.com/next-share'}
>
  <LivejournalIcon size={32} round />
</LivejournalShareButton>

📖 LivejournalShareButton 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. | ❌ |

📖 LivejournalIcon Props

🎀 Workplace

👨‍💻 Code

import {
  WorkplaceShareButton,
  WorkplaceIcon,
} from 'next-share'

<WorkplaceShareButton
  url={'https://github.com/next-share'}
  quote={'Next Share'}
>
  <WorkplaceIcon size={32} round />
</WorkplaceShareButton>

📖 WorkplaceShareButton 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. | ❌ |

📖 WorkplaceIcon Props

🎀 Pocket

👨‍💻 Code

import {
  PocketShareButton,
  PocketIcon,
} from 'next-share'

<PocketShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <PocketIcon size={32} round />
</PocketShareButton>

📖 PocketShareButton 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. | ❌ |

📖 PocketIcon Props

🎀 Instapaper

👨‍💻 Code

import {
  InstapaperShareButton,
  InstapaperIcon,
} from 'next-share'

<InstapaperShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <InstapaperIcon size={32} round />
</InstapaperShareButton>

📖 InstapaperShareButton 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. | ❌ |

📖 InstapaperIcon Props

🎀 Hatena

👨‍💻 Code

import {
  HatenaShareButton,
  HatenaIcon,
} from 'next-share'

<HatenaShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <HatenaIcon size={32} round />
</HatenaShareButton>

📖 HatenaShareButton 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. | ❌ |

📖 HatenaIcon Props

🎀 FacebookMessenger

👨‍💻 Code

import {
  FacebookMessengerShareButton,
  FacebookMessengerIcon,
} from 'next-share'

<FacebookMessengerShareButton
  url={'https://github.com/next-share'}
  appId={''}
>
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>

📖 FacebookMessengerShareButton 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. | ❌ |

📖 FacebookMessengerIcon Props

🎀 Email

👨‍💻 Code

import {
  EmailShareButton,
  EmailIcon,
} from 'next-share'

<EmailShareButton
  url={'https://github.com/next-share'}
  subject={'Next Share'}
  body="body"
>
  <EmailIcon size={32} round />
</EmailShareButton>

📖 EmailShareButton 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. | ❌ |

📖 EmailIcon Props

🎀 Gab

👨‍💻 Code

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

<GabShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <GabIcon size={32} round />
</GabShareButton>

📖 GabShareButton 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. | ❌ |

📖 GabIcon Props

📚 Icons Props

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | size | number | | Icon size in pixels. | ❌ | | round | boolean | | 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. | ❌ | | blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

💡 Usage of ShareCount

🎀 Facebook

👨‍💻 Code

import { FacebookShareCount } from 'next-share'

<FacebookShareCount
  url={'https://github.com/next-share'}
  appId={''}
  appSecret={''}
/>

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

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

<HatenaShareCount url={'https://github.com/next-share'} />

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

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

<OKShareCount url={'https://github.com/next-share'} />

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

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

<PinterestShareCount url={'https://github.com/next-share'} />

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

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

<TumblrShareCount url={'https://github.com/next-share'} />

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

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

<VKShareCount url={'https://github.com/next-share'} />

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

📖 VKShareCount Props

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

💡 Usage of Icon

👨‍💻 Code

import {
  EmailIcon,
  FacebookIcon,
  FacebookMessengerIcon,
  GithubIcon,
  HatenaIcon,
  InstagramIcon,
  InstapaperIcon,
  LineIcon,
  LinkedinIcon,
  LivejournalIcon,
  MailruIcon,
  OKIcon,
  PinterestIcon,
  PocketIcon,
  RedditIcon,
  SpotifyIcon,
  TelegramIcon,
  TumblrIcon,
  TwitterIcon,
  ViberIcon,
  VKIcon,
  WeiboIcon,
  WhatsappIcon,
  WorkplaceIcon,
} from 'next-share'

📖 Props

| Props | Type | Default | Description | Required | | :--- | :--- | :--- | :--- | :--- | | size | number | | Icon size in pixels. | ❌ | | round | boolean | | Whether to show round or rect icons. | ❌ | | borderRadius | number | | Allow rounded corners if using rect icons. | ❌ | | bgStyle | object | | Customize background. | ❌ | | iconFillColor | string | white | Customize icon fill color. | ❌ |

📜 Changelog

Latest version 0.27.0 (2023-09-28):

  • Upgrade TwitterIcon

Details changes for each release are documented in the CHANGELOG.md.

💖 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

✨ Contributors

👨‍👩‍👦 Advertisement

You maybe interested.

  • React Patterns – React patterns & techniques to use in development for React Developer.
  • React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
  • Next QRCode – React hooks for generating QR code for your next React apps.
  • Next Time Ago – A lightweight tiny time-ago component for your next React apps.

⚖️ License

The MIT License License: MIT