react-awesome-social

<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

• On my portfolio
• Live code at Webpackbin

Examples

With react-awesome-button and plain CSS

  import AwesomeSocial from 'react-awesome-social';
  import 'react-awesome-button/dist/styles.css';
 
  function Button() {
    return (
      <AwesomeSocial type="facebook">Share</AwesomeSocial>
    );
  }

With react-awesome-button CSS Modules

  import AwesomeSocial from 'react-awesome-social';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss'
 
  function Button() {
    return (
      <AwesomeSocial
        cssModule={AwesomeButtonStyles}
        type="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.