{"id":15150474,"url":"https://github.com/ayda-tech/react-share-lite","last_synced_at":"2025-10-24T06:31:24.935Z","repository":{"id":210630796,"uuid":"726892109","full_name":"ayda-tech/react-share-lite","owner":"ayda-tech","description":"react-share-lite is a simple and easy-to-use library for adding social media share buttons to your React \u0026 Next applications. With react-share-lite, you can quickly integrate share buttons for popular social media platforms such as Facebook, Twitter, LinkedIn, and more.","archived":false,"fork":false,"pushed_at":"2024-08-01T19:48:33.000Z","size":279,"stargazers_count":15,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-10-29T22:56:19.533Z","etag":null,"topics":["nextjs","npm-package","preact","react-share-lite","reactjs","socia-media-widget","social-media"],"latest_commit_sha":null,"homepage":"https://react-share-lite.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayda-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-03T17:51:44.000Z","updated_at":"2024-09-10T06:10:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf17b544-a8a1-4ffc-bc0c-c028a8eb8507","html_url":"https://github.com/ayda-tech/react-share-lite","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.4285714285714286,"last_synced_commit":"317093295c018073b0e918eb1c2971f2c1b745f4"},"previous_names":["ayda-tech/react-share-lite"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayda-tech%2Freact-share-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayda-tech%2Freact-share-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayda-tech%2Freact-share-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayda-tech%2Freact-share-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayda-tech","download_url":"https://codeload.github.com/ayda-tech/react-share-lite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237926611,"owners_count":19388577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","npm-package","preact","react-share-lite","reactjs","socia-media-widget","social-media"],"created_at":"2024-09-26T14:04:41.036Z","updated_at":"2025-10-24T06:31:19.616Z","avatar_url":"https://github.com/ayda-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React-Share-Lite\n\nreact-share-lite is a simple and easy-to-use library for adding social media share buttons to your React, Next and Preact applications. With react-share-lite, you can quickly integrate share buttons for popular social media platforms such as Facebook, Twitter, LinkedIn, and more.\n\nIf you want to add share count functionality to your share buttons in your React, Next.js, or Preact projects built with JavaScript and TypeScript, [react-share-kit](https://www.npmjs.com/package/react-share-kit) is the solution. It seamlessly enhances your applications, allowing users to easily track the popularity of your content.\n\n[![downloads](https://img.shields.io/npm/dm/react-share-lite.svg?label=monthly%20downloads)](https://www.npmjs.com/package/react-share-lite) [![downloads](https://img.shields.io/npm/dt/react-share-lite.svg?label=total%20downloads)](https://www.npmjs.com/package/react-share-lite)\n\n[![NPM](https://img.shields.io/npm/v/react-share-lite.svg)](https://www.npmjs.com/package/react-share-lite) ![npm bundle size](https://img.shields.io/bundlephobia/min/next-share) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![Share buttons screenshot](https://github.com/ayda-tech/react-share-lite/blob/main/react-share-lite.png?raw=true)\n\n\n---\n\n### Table of Contents\n\n- [React-Share-Lite](#react-share-lite)\n  - [Table of Contents](#table-of-contents)\n- [Installation](#installation)\n- [📕 Share Button Global Props](#-share-button-global-props)\n- [💡 Usage of ShareButtons](#-usage-of-sharebuttons)\n  - [Facebook Share](#facebook-share)\n  - [Twitter Share](#twitter-share)\n  - [Linkedin Share](#linkedin-share)\n  - [Whatsapp Share](#whatsapp-share)\n  - [Telegram Share](#telegram-share)\n  - [FacebookMessenger Share](#facebookmessenger-share)\n  - [Email Share](#email-share)\n  - [VK Share](#vk-share)\n  - [Pinterest Share](#pinterest-share)\n  - [Reddit Share](#reddit-share)\n  - [Line Share](#line-share)\n  - [Tumblr Share](#tumblr-share)\n  - [Viber Share](#viber-share)\n  - [Weibo Share](#weibo-share)\n  - [Mailru Share](#mailru-share)\n  - [LiveJournal Share](#livejournal-share)\n  - [Workplace Share](#workplace-share)\n  - [Pocket Share](#pocket-share)\n  - [Instapaper Share](#instapaper-share)\n  - [Hatena Share](#hatena-share)\n  - [Gab Share](#gab-share)\n- [License](#license)\n\n## Installation\n\nTo install react-share-lite, simply run:\n\n```bash\nnpm install react-share-lite\n```\n\nor\n\n```bash\nyarn add react-share-lite\n```\n\n## 📕 Share Button Global Props\n\nEach button supports a set of global props that are consistent across all buttons. However, in addition to these global props, each button also possesses its own unique set of specific properties. These specific properties are tailored to the individual functionality and customization options of each button.\n\n| Props        | Type    | Default       | Description                                                                                       | Required |\n| :----------- | :------ | :------------ | :------------------------------------------------------------------------------------------------ | :------- |\n| url          | string  |               | The URL of the shared page.                                                                       | TRUE     |\n| title        | string  |               | The title of the shared page.                                                                     | FALSE    |\n| windowWidth  | number  | 550           | Opened window width.                                                                              | FALSE    |\n| windowHeight | number  | 400           | Opened window height.                                                                             | FALSE    |\n| blankTarget  | boolean | false         | Open share window in a new tab if set to `true`.                                                  | FALSE    |\n| bgColor      | string  | related color | Icon background color.                                                                            | FALSE    |\n| round        | boolean | false         | The \"round\" attribute creates a fully circular button shape, giving it a 100% rounded appearance. | FALSE    |\n| borderRadius | number  | 0px           | Custom round share.                                                                               | FALSE    |\n| size         | number  | 64px          | The button size.                                                                                  | FALSE    |\n| buttonTitle  | string  |               | The title of button used instead of icon.                                                         | FALSE    |\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```jsx\nimport React from 'react'\nimport { FacebookShare } from 'react-share-lite'\n\nconst ShareButtons = () =\u003e {\n  const shareUrl = 'https://github.com/ayda-tech/react-share-lite'\n  const title = 'Check out this awesome website!'\n\n  return \u003cFacebookShare url={shareUrl} quote={title} /\u003e\n}\n```\n\n## 💡 Usage of ShareButtons\n\n### Facebook Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { FacebookShare } from 'react-share-lite';\n\u003cFacebookShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  quote={'react-share-lite - social share buttons for next \u0026 react apps.'}\n  hashtag={'#react-share-lite'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Facebook\n\n| Props   | Type   | Default | Description           | Required |\n| :------ | :----- | :------ | :-------------------- | :------- |\n| quote   | string |         | A quote to be shared. | FALSE    |\n| hashtag | string |         | Hashtag to be shared. | FALSE    |\n\n### Twitter Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport {\n  TwitterShare\n} from 'react-share-lite'\n\n\u003cTwitterShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  title={'react-share-lite - social share buttons for next \u0026 react apps.'}\n  hashtags=[\"#react-share-lite\", \"#front-end\"]\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Twitter\n\n| Props    | Type   | Default | Description | Required |\n| :------- | :----- | :------ | :---------- | :------- |\n| via      | string |         | A screen name to associate with the Tweet. | FALSE    |\n| hashtags | array  |         | A comma-separated list of hashtags to be appended to default Tweet text. | FALSE    |\n| related  | array  |         | A comma-separated list of accounts related to the content of the shared URI. | FALSE    |\n\n### Linkedin Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { LinkedinShare } from 'react-share-lite'\n\n\u003cLinkedinShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n### Whatsapp Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { WhatsappShare } from 'react-share-lite'\n\n\u003cWhatsappShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  title={'react-share-lite - social share buttons for next \u0026 react apps.'}\n  separator=\":: \"\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on WhatsApp\n\n| Props     | Type   | Default | Description | Required |\n| :-------- | :----- | :------ | :---------- | :------- |\n| separator | string |         |             | FALSE    |\n\n### Telegram Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { TelegramShare } from 'react-share-lite'\n\n\u003cTelegramShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n### FacebookMessenger Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { FacebookMessengerShareButton } from 'react-share-lite'\n\n\u003cFacebookMessengerShareButton\n  url=\"https://github.com/ayda-tech/react-share-lite\"\n  redirectUri=\"https://github.com/ayda-tech/react-share-lite\"\n  appId={'dmm4kj9djk203k4liuf994p'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Facebook Messenger\n\n| Props       | Type   | Default | Description                                                                                                 | Required |\n| :---------- | :----- | :------ | :---------------------------------------------------------------------------------------------------------- | :------- |\n| appId       | string |         | Facebook application id.                                                                                    | TRUE     |\n| redirectUri | string |         | The URL to redirect to after sharing (default: the shared url).                                             | FALSE    |\n| to          | string |         | A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. | FALSE    |\n\n### Email Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { EmailShare } from 'next-share'\n\n\u003cEmailShare\n  url={'https://github.com/next-share'}\n  subject={'Next Share'}\n  body=\"body\"\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Email\n\n| Props       | Type    | Default | Description                                      | Required |\n| :---------- | :------ | :------ | :----------------------------------------------- | :------- |\n| children    | node    |         | React component, HTML element or string.         | TRUE     |\n| url         | string  |         | The URL of the shared page.                      | TRUE     |\n| subject     | string  |         | The subject of the email.                        | FALSE    |\n| body        | string  |         | The body of the email.                           | FALSE    |\n| separator   | string  |         | A separator to be shared.                        | FALSE    |\n| blankTarget | boolean | false   | Open share window in a new tab if set to `true`. | FALSE    |\n\n### VK Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { VKShare } from 'react-share-lite'\n\n\u003cVKShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  image={'./react-share.png'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on VK\n\n| Props     | Type    | Default | Description                                                                                                  | Required |\n| :-------- | :------ | :------ | :----------------------------------------------------------------------------------------------------------- | :------- |\n| image     | string  |         | An absolute link to the image that will be shared.                                                           | FALSE    |\n| noParse   | boolean |         | If true is passed, VK will not retrieve URL information.                                                     | FALSE    |\n| 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    |\n\n### Pinterest Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { PinterestShare } from 'react-share-lite'\n\n\u003cPinterestShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  media={'react-share-lite - social share buttons for next \u0026 react apps.'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Pinterest\n\n| Props       | Type   | Default | Description                          | Required |\n| :---------- | :----- | :------ | :----------------------------------- | :------- |\n| media       | string |         | The image URL that will be pinned.   | TRUE     |\n| description | string |         | The description of the shared media. | FALSE    |\n\n### Reddit Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { RedditShare } from 'react-share-lite'\n\n\u003cRedditShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n### Line Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { LineShare } from 'react-share-lite'\n\n\u003cLineShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n### Tumblr Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { TumblrShare } from 'react-share-lite'\n\n\u003cTumblrShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  caption=\"react-share-lite - social share buttons for next \u0026 react apps.\"\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Tumblr\n\n| Props    | Type                             | Default           | Description                         | Required |\n| :------- | :------------------------------- | :---------------- | :---------------------------------- | :------- |\n| tags     | \u003ccode\u003eArray\u0026lt;string\u0026gt;\u003c/code\u003e |                   | An array of tags to be shared.      | FALSE    |\n| caption  | string                           |                   | The description of the shared page. | FALSE    |\n| posttype | string                           | \u003ccode\u003elink\u003c/code\u003e | The type of the post.               | FALSE    |\n\n### Viber Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { ViberShare } from 'react-share-lite'\n\n\u003cViberShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  title={'react-share-lite - social share buttons for next \u0026 react apps.'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Viber\n\n| Props     | Type   | Default | Description | Required |\n| :-------- | :----- | :------ | :---------- | :------- |\n| separator | string |         |             | FALSE    |\n\n### Weibo Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { WeiboShare } from 'react-share-lite'\n\n\u003cWeiboShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  title={'react-share-lite - social share buttons for next \u0026 react apps.'}\n  image={`${String(window.location)}/${example - image}`}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Weibo\n\n| Props | Type   | Default | Description                        | Required |\n| :---- | :----- | :------ | :--------------------------------- | :------- |\n| image | string |         | The image URL that will be shared. | FALSE    |\n\n### Mailru Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { MailruShare } from 'react-share-lite'\n\n\u003cMailruShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Mail-Ru\n\n| Props       | Type   | Default | Description                     | Required |\n| :---------- | :----- | :------ | :------------------------------ | :------- |\n| description | string |         | Description of the shared page. | FALSE    |\n| imageUrl    | string |         | Image url of the shared page.   | FALSE    |\n\n### LiveJournal Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { LiveJournalShare } from 'react-share-lite'\n\n\u003cLiveJournalShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Live Journal\n\n| Props       | Type   | Default | Description                     | Required |\n| :---------- | :----- | :------ | :------------------------------ | :------- |\n| description | string |         | Description of the shared page. | FALSE    |\n\n### Workplace Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { WorkplaceShare } from 'react-share-lite'\n\n\u003cWorkplaceShare\n  url={'https://github.com/ayda-tech/react-share-lite'}\n  quote={'React Share Lite'}\n/\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Workspace\n\n| Props   | Type   | Default | Description | Required |\n| :------ | :----- | :------ | :---------- | :------- |\n| quote   | string |         | A quote to be shared. | FALSE    |\n| hashtag | string |         | Hashtags to be shared.   | FALSE    |\n\n### Pocket Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport {\n  PocketShare\n} from 'react-share-lite'\n\n\u003cPocketShare url={'https://github.com/ayda-tech/react-share-lite' /\u003e\n```\n\n### Instapaper Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { InstapaperShare } from 'react-share-lite'\n\n\u003cInstapaperShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n📕 \u003cb\u003eProps\u003c/b\u003e: Supports only on Instapaper\n\n| Props       | Type   | Default | Description                     | Required |\n| :---------- | :----- | :------ | :------------------------------ | :------- |\n| description | string |         | Description of the shared page. | FALSE    |\n\n### Hatena Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport {\n  HatenaShare\n} from 'react-share-lite'\n\n\u003cHatenaShare url={'https://github.com/ayda-tech/react-share-lite' /\u003e\n```\n\n### Gab Share\n\n👨‍💻 \u003cb\u003eExample\u003c/b\u003e\n\n```js\nimport { GabShare } from 'react-share-lite'\n\n\u003cGabShare url={'https://github.com/ayda-tech/react-share-lite'} /\u003e\n```\n\n## License\n\nreact-share-lite is licensed under the MIT License. See the [LICENSE](https://github.com/ayda-tech/react-share-lite/blob/main/LICENSE) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayda-tech%2Freact-share-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayda-tech%2Freact-share-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayda-tech%2Freact-share-lite/lists"}