react-social-media-buttons

1.0.8 • Public • Published

React Social Media Buttons - RSMB

RSMB is a complete ready to use react component for displaying the most common Social Media icons and format them as you wish.

Getting started

npm install react-social-media-buttons

How to use

Check out the live demo here to get an idea on how it works!

Import the component SocialMediaButtons from the library and pass the props of your social links and CSS.

import SocialMediaButtons from 'react-social-media-buttons';
 
const MyComponent = () => {
  const links = ['https://github.com/jaumefapa', 'https://www.linkedin.com/in/jaume-fabrega/'];
 
  const buttonStyle = {
    backgroundColor: '#000000',
    borderRadius: '50%',
  };
 
  const iconStyle = { color: '#ffffff' };
 
  return (
    <div>
      <SocialMediaButtons buttonStyle={buttonStyle} iconStyle={iconStyle} />
    </div>
  );
};

Props

Prop name Type Default Required Description
width String! 50px false
height String! 50px false
margin String! 5px false
backgroundColor String! #ffffff false
borderRadius String! 50% false
border String! 2px solid #000000 false
borderColor String! - false
borderThickness String! - false
borderStyle String! - false

iconStyle

Prop name Type Default Required Description
color String! #000000 true Color of the icon

openNewTab

Prop name Type Default Required Description
openNewTab Boolean! true false Indicate if open links in a new tab

Other examples

Custom Options

It's possible to pass options and style objects to customize the way you prefer.

<SocialMediaButtons
  links={
    [
      /* array of links */
    ]
  }
  buttonStyle={{
    width: '80px',
    height: '80px',
    border: '2px solid #000000',
    backgroundColor: '#919191',
  }}
  iconStyle={{
    color: '#ffffff',
  }}
/>

Contributing

To contribue please read the CONTRIBUTING.md

Contributors

Acknowledgments

  • To Leonardo Di Vittorio for the idea and the demo "inspiration" - GitHub
  • To Jake Trent from whom I fork the original repo with all the svg icons - GitHub
  • To my colleagues who contributed with ideas, feedback and some refactorization suggestions. Special mention to Erik Pastor for finding that bug (GitHub)

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Package Sidebar

Install

npm i react-social-media-buttons

Weekly Downloads

3

Version

1.0.8

License

MIT

Unpacked Size

64.2 kB

Total Files

4

Last publish

Collaborators

  • jaumefapa