<AwesomeSocial />
react-awesome-social
is a performant, extendable, highly customisable, production ready React Component that renders a set of multi-purpose social and share animated buttons. Social SVG icons included.
Live demo
Examples
With react-awesome-button and plain CSS
import AwesomeSocial from 'react-awesome-social'; import 'react-awesome-button/dist/styles.css'; { return <AwesomeSocial ="facebook">Share</AwesomeSocial> ; }
With react-awesome-button CSS Modules
import AwesomeSocial from 'react-awesome-social'; import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss' { return <AwesomeSocial = ="twitter" >Share</AwesomeSocial> ; }
Key Features
- Built in share methods for facebook, messenger, twitter, google plus, reddit, pinterest, whatsapp and vk
- All SVG social icons included
- Look and feel customisable and extendable via SASS variables and lists (scss config file)
- Use it with CSSModules or Plain CSS (NO inline-styles)
- OnClick bubble animation
Attributes | Type | Default | Description |
---|---|---|---|
action | function |
null |
Default click function; Overwrites the custom share behaviour |
bubbles | bool |
false |
Should render the bubbles animation onMouseUp |
disabled | bool |
false |
Should render a disabled button |
type | string |
required |
Specify the social button type; oneOf (facebook, twitter, instagram, reddit, vk, pinterest, whatsapp, messenger) |
size | string |
"auto" |
Render a specific button size, styled by the .scss size list |
element | node |
null |
Overwrites the AwesomeButton as default container element. Use it to customise with your own buttons |
href | string |
null |
Forces the button to be rendered on an anchor container and sets the href to the specified value |
target | string |
null |
Render an anchor with a specific target attribute |
visible | bool |
true |
Should the button be visible |
License
MIT. Copyright (c) 2017 Rafael Caferati.