JSPM – react-share-social@0.1.60

Package Exports

react-share-social
react-share-social/dist/index.js

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

UI component to share contents in Social media.

Demo

Demo.

Features

share UI support for:

Facebook
WhatsApp
Twitter
LinkedIn
Telegram
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' 
 
export default function RSSUsage() {
  return <ShareSocial 
     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

<ShareSocial  
  url ="url_to_share.com"
  socialTypes= {['facebook','twitter']}
  onSocialButtonClicked={ data => console.log(data)}    
/>

Props

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

Example:

<ShareSocial 
  title={'sharing happiness'} 
  url ="url_to_share.com"
  socialTypes= {['facebook','twitter']}
/>

Custom Styles

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

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

  },
  copyContainer: {
    border: '1px solid blue',
    background: 'rgb(0,0,0,0.7)'
  },
  title: {
    color: 'aquamarine',
    fontStyle: 'italic'
  }
};

<ShareSocial 
  url ="url_to_share.com"
  socialTypes= {['facebook','twitter']}
  style={style}
/>

License

MIT