JSPM

  • Created
  • Published
  • Downloads 1520
  • Score
    100M100P100Q109783F

UI component to share contents in Social media. Share contents in facebook, twitter, pinterest, whatsapp etc.

Package Exports

  • react-share-social

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-share-social) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-share-social

UI component to share contents in Social media.

Demo

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 ReactShareSocial from 'react-share-social' 

export default function RSSUsage() {
  return <ReactShareSocial 
     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 ReactShareSocial from 'react-share-social' 
 

export default function RSSCallback() { 
    return  <ReactShareSocial  
                 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:

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

Custom Styles

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

import ReactShareSocial 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 <ReactShareSocial style={style} />
}

License

MIT