0.1.60 • Published 1 year ago

react-share-social v0.1.60

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
  • 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

0.1.60

1 year ago

0.1.56

1 year ago

0.1.57

1 year ago

0.1.58

1 year ago

0.1.59

1 year ago

0.1.52

3 years ago

0.1.53

3 years ago

0.1.54

3 years ago

0.1.55

3 years ago

0.1.50

3 years ago

0.1.51

3 years ago

0.1.49

3 years ago

0.1.48

4 years ago

0.1.41

4 years ago

0.1.42

4 years ago

0.1.43

4 years ago

0.1.44

4 years ago

0.1.45

4 years ago

0.1.46

4 years ago

0.1.47

4 years ago

0.1.40

5 years ago

0.1.39

5 years ago

0.1.38

5 years ago

0.1.37

5 years ago

0.1.36

5 years ago

0.1.35

5 years ago

0.1.34

5 years ago

0.1.33

5 years ago

0.1.32

5 years ago

0.1.31

5 years ago

0.1.30

5 years ago

0.1.29

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.24

5 years ago

0.1.23

5 years ago

0.1.21

5 years ago

0.1.22

5 years ago

0.1.20

5 years ago

0.1.19

5 years ago

0.1.18

5 years ago

0.1.17

5 years ago

0.1.16

5 years ago

0.1.13

5 years ago

0.1.14

5 years ago

0.1.15

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.5

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago