https://github.com/housinghq/react-share-button

📱 React share button component with web-share api and fallback modal with native intent urls
https://github.com/housinghq/react-share-button

clipboard facebook intents mail react share twitter web-share whatsapp

Last synced: about 2 months ago
JSON representation

📱 React share button component with web-share api and fallback modal with native intent urls

• Host: GitHub
• URL: https://github.com/housinghq/react-share-button
• Owner: housinghq
• License: mit
• Created: 2017-03-12T09:28:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-21T10:14:40.000Z (over 7 years ago)
• Last Synced: 2024-06-22T18:47:34.489Z (3 months ago)
• Topics: clipboard, facebook, intents, mail, react, share, twitter, web-share, whatsapp
• Language: JavaScript
• Homepage:
• Size: 4.02 MB
• Stars: 91
• Watchers: 3
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-share-button

> A lightweight React Share Button for mobile web with web share api integration, native intent support and fallback.



  

  



## Features

1. [Web Share Api](https://developers.google.com/web/updates/2016/10/navigator-share) (on Origin Trials experiment until April 2017)

1. Share Modal Fallback for other browsers

1. Share via Whatsapp, FB, Twitter, Mail or Copy on Clipboard

## Installation

```

npm install --save react-share-button

```

## Basic Usage

To get web-share API on your origin just [request a token for your origin.](https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform_)

You will get an email within 24 hrs with you key, then just add a meta tag

```

```

Know more about [OriginTrials](https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md)

**JSX**:

```js

import ShareBtn from 'react-share-button';

```

**CSS**

```css

@import "react-share-button/dist/ShareBtn"

```

## Options

### <ShareBtn/> Component

prop|default|description

----|-------|-----------

className|''|Custom classnamem, you can style your button with this

url|''|The URL you want to share

text|''|The Text before the URL (E.g. Hey checkout this awesome property!!)

displayText| Share |Any text you wanna write on button like Share Property

onShareBtnClick| () => {} |A callback function when share button is clicked

sharedBy| (medium) => {console.log('shared via ', medium)}|A callback function when user clicks on any share medium from share modal

### Development

```

git clone https://github.com/housinghq/react-share-button

cd react-share-button

npm install

npm run storybook

```

Open an issue before opening a PR. The UI in this package is for mobile only.

### License

MIT @ Loconsolutions