React-share-social NPM

react-share-social

UI component to share contents in Social media.

Demo

Features

share UI support for:

Facebook
Hatena
Twitter
LinkedIn
Reddit
Line
Instapaper
Hatena
email
Live Journal
Ok
Mailru

Install

npm install react-share-social --save

Usage

React-share-social component don't pollute the global scope.

import {ShareSocial} from 'react-share-social' 

const style = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  borderRadius: 3,
  border: 0,
  color: 'white',
  padding: '0 30px',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
};
export default function RSSUsage() {
  return <ShareSocial 
     style={style}
     url ="url_to_share.com"
     socialTypes={['facebook','twitter','reddit','linkedin']}
   />
}

Callback

react-share-social component provides a a helpful callback everytime a social media icon is clicked

import {ShareSocial} from 'react-share-social' 
 

export default function RSSCallback() { 
    return  <ShareSocial  
                 onSocialButtonClicked={ data=> console.log(data)}    
            />
}
//socialType: "twitter"

Props

url: content to be shared
socialTypes: array of button names
onSocialButtonClicked: Callback function to receive a data everytime any social button is clicked
style: Allow inline custom css of the root
title: title of the component

Example:

<ShareSocial title={'sharing happiness'} />

Custom Styles

react-share-social component provides a style property. These properties are always applied to the root element.

import {ShareSocial} from 'react-share-social' 

// We can use inline-style
const style = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  borderRadius: 3,
  border: 0,
  color: 'white',
  padding: '0 30px',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
};

export default function InlineStyle() { 
    return <ShareSocial style={style} />
}