Skip to content

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

Notifications You must be signed in to change notification settings

react-z/react-social-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-social-buttons

npm version

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

Install

yarn add react-social-buttons

Versions

1.0.3 uses React ^0.13.1

1.0.9 uses React ^15.1.0

1.1.0 uses React ^16.0.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: '[email protected]',
     bcc: '[email protected]',
     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

yarn
yarn dev

Test

yarn test

Build

yarn
yarn build

Publish

npm login
npm version patch
git add -A
git push origin master
npm publish

License

MIT

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published