UNPKG

twreporter-react

Version:

React-Redux site for The Reporter Foundation in Taiwan

162 lines (112 loc) 3.42 kB
# 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