Skip to content

Commit

Permalink
Improve readme (#1)
Browse files Browse the repository at this point in the history
* better readme

* fix
  • Loading branch information
ritz078 authored Mar 21, 2017
1 parent 32c7d3a commit fb6f37b
Show file tree
Hide file tree
Showing 3 changed files with 6,385 additions and 14 deletions.
25 changes: 11 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
#react-share-button
# react-share-button

> A lightweight React Share Button for mobile web with web share api integration, native intent support and fallback.
<div style='text-align:center;'>
<span display="inline-block"><img src="./demo.gif" width="320" height="560"/></span>
</div>

##Features
## 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 Modal Fallback for other browsers
1. Share via Whatsapp, FB, Twitter, Mail or Copy on Clipboard

## Installation
Expand All @@ -17,18 +20,18 @@ npm install --save react-share-button

## Basic Usage

To get web-share API on your origin just [requesting a token for your origin.](https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform_)
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
```
<meta http-equiv="origin-trial" content="**insert your token as provided in the the email here**">
```
Know more about [OriginTrials](https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md)
Know more about [OriginTrials](https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md)

**JSX**:
```js
import ShareBtn from 'react-share-button';

<ShareBtn
<ShareBtn
url={url}
text={text}
className='ib'
Expand All @@ -53,12 +56,6 @@ 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

### Preview
<div style='text-align:center;'>
<span display="inline-block" margin-right="12"><img src="web-api.png" width="320" height="560"/></span>
<span display="inline-block"><img src="modal.png" width="320" height="560"/></span>
</div>

### Development
```
git clone https://github.com/housinghq/react-share-button
Expand All @@ -67,7 +64,7 @@ npm install
npm run storybook
```

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

###License
### License
MIT @ Loconsolutions
Binary file added demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit fb6f37b

Please sign in to comment.