React-awesome-social NPM

<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