hmanicka / react-social-buttons

social buttons component for react, includes google, facebook, twitter, pinterest and more

react-social-buttons

Social buttons component for react, includes: Google; GoogleHangout; Facebook; Twitter; Pinterest; Reddit; WhatsApp; Email;

Install

npm install react-social-buttons --save

Versions

1.0.3 uses React ^0.13.1

1.0.9 uses React ^15.1.0

Use

import ReactDOM from 'react-dom';
import React, { Component, PropTypes } from 'react';
import {
  TwitterButton,
  FacebookLikeButton,
  FacebookShareButton,
  FacebookMessengerButton,
  GoogleButton,
  GoogleHangoutButton,
  PinterestButton,
  WhatsAppButton,
  RedditButton,
  EmailButton,
} from 'react-social-buttons';

class TestComponent extends Component {

  isBrowser () {
    return !(typeof document === "undefined" || typeof window === "undefined");
  }

 render () {
   let url = ''
   if (this.isBrowser()) { url = window.location.href; }

   const whatsAppProps = {
     msg: 'test',
     button: <span>{'Your custom content'}</span>,
   };

   const redditProps = {
     url,
     button: <img src={'//www.redditstatic.com/spreddit1.gif'}
                  alt={'submit to reddit'} border={'0'} />,
   };

   const emailProps = {
     subject: 'Test email',
     cc: '[e-mail]',
     bcc: '[e-mail]',
     body: 'Your test message',
     button: <span>{'Share via Email'}</span>,
   };

   return (
     <div id="buttons">
       <FacebookLikeButton url={url} />
       <FacebookShareButton url={url} />
       <FacebookMessengerButton url={url} />
       <TwitterButton url={url} text={'this page is cool'}/>
       <GoogleButton url={url} />
       <GoogleHangoutButton url={url} />
       <PinterestButton url={url} />
       <WhatsAppButton {...whatsAppProps} />
       <RedditButton {...redditProps} />
       <EmailButton {...emailProps} />
     </div>
   )
 }
}

ReactDOM.render( <TestComponent />, document.getElementById('root') )

Development

npm install
npm run build
npm test
npm start

License

MIT