Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-social-buttons with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactSocialButtons = require("react-social-buttons")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-social-buttons v1.1.1

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

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: 'test@gmail.com',
     bcc: 'test@gmail.com',
     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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free