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