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

Keywords

FAQs

Package last updated on 06 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-share-social