0.1.48 • Published 1 year ago

react-share-social v0.1.48

Weekly downloads
242
License
-
Repository
-
Last release
1 year ago

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 {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} />
}

License

MIT

0.1.48

1 year ago

0.1.41

1 year ago

0.1.42

1 year ago

0.1.43

1 year ago

0.1.44

1 year ago

0.1.45

1 year ago

0.1.46

1 year ago

0.1.47

1 year ago

0.1.40

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.34

2 years ago

0.1.33

2 years ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.30

2 years ago

0.1.29

2 years ago

0.1.28

2 years ago

0.1.27

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.12

2 years ago

0.1.11

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.5

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago