next-share
v0.27.0
Published
Social media share buttons for your next React apps.
Downloads
142,753
Maintainers
Readme
next-share
Social media share buttons for your next React apps.
🎁 Features
- No dependencies
- Compatible with both JavaScript and TypeScript
- Share buttons for your next React app
- Line
- Telegram
- Tumblr
- Viber
- VKShare
- Mailru
- Livejournal
- Workplace
- Instapaper
- Hatena
- FacebookMessenger
- 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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
👨💻 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. | ❌ |
👨💻 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.