twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
162 lines (112 loc) • 3.42 kB
Markdown
# react-social
[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependency Status][dep-image]][dep-url]
[![Download Count][downloads-image]][downloads-url]
> Simple [React](http://facebook.github.io/react/index.html) components for
> social (Facebook, Google, VKontakte, Pinterest ...) buttons and counts.
## Install
```bash
npm install react-social --save
```
## Example
```javascript
import { FacebookButton, FacebookCount } from "react-social";
class App extends Component {
render {
let url = "https://github.com";
return (
<FacebookButton url={url}>
<FacebookCount url={url} />
{" Share " + url}
</FacebookButton>
);
}
}
```
## Count API
**WARNING: `GooglePlusCount`, `TwitterCount` and `PocketCount` uses the
[donreach API](http://donreach.com/social-share-count) which has a limit
of 1000 request per day, if you have an alternative please do not hesitate
to make a PR**
- FacebookCount
- TwitterCount
- GooglePlusCount
- PinterestCount
- LinkedInCount
- RedditCount
- VKontakteCount
- TumblrCount
- PocketCount
### Props
##### element
Change the element the component renders into, default is `span`.
##### url
The url you want to get the count of, default is `window.location`.
##### onCount
Callback for when the count is updated. Callback takes one argument `count`.
### Methods
##### getCount()
Return the social count.
## Button API
- FacebookButton
- TwitterButton
- GooglePlusButton
- PinterestButton
- LinkedInButton
- RedditButton
- VKontakteButton
- EmailButton
- XingButton
- TumblrButton
- PocketButton
### Props
##### element
Change the element the component renders into, default is `button`.
##### url
The url you want to share, default is `window.location`.
##### target
The target you want to open, default is `_blank`.
##### message
- TwitterButton
- FacebookButton
- XingButton
- TumblrButton
- PocketButton
- PinterestButton (required)
A message that's prepended before the url.
##### media
- PinterestButton (required)
Url of an image.
##### appId
- FacebookButton
Facebook app id.
## Styles
There are no styles included, the components pass all their props down
to their element like `className` and `style` so you can easily style
them yourself.
## Notice
* When rendered server side counts will be 0 since they depend on JSONP.
* `GooglePlusCount`, `TwitterCount` and `PocketCount` uses the donreach API which has a limit of 1000 requests per day.
## Contributors
* Ola Holmström (@olahol)
* Alexandr Sugak (@AlexSugak)
* Jon Principe (@jprincipe)
* Jean-Baptiste Quenot (@jbq)
* Kurt Weiberth (@kweiberth)
* Bartek Gruszka (@bartekgruszka)
* Josh Owens (@queso)
* Maxime Mezrahi (@maxs15)
* Arvin Tehrani (@arvinkx)
* Dennis Stücken (@dstuecken)
* Jonas (@jonashaefele)
---
MIT Licensed
[npm-image]: https://img.shields.io/npm/v/react-social.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-social
[downloads-image]: http://img.shields.io/npm/dm/react-social.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-social
[travis-image]: https://img.shields.io/travis/olahol/react-social/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/olahol/react-social
[dep-image]: https://david-dm.org/olahol/react-social/peer-status.svg?style=flat-square
[dep-url]: https://david-dm.org/olahol/react-social