React Social Media Bar

react-social-media-bar is a React component to create external social media links

Features

• uses Font Awesome brand icons
• customizable overall and within each icon (as per colors, sizes, opacities, etc.)

Version

• this is the first version of react-social-media-bar

Table of Contents

• Installation
• Examples
• Props
• Credits

Installation

1. Install React Social Media Bar as a dependency

# NPM 
npm install react-social-media-bar --save
 
# Yarn 
yarn add react-social-media-bar

1. Import the react-social-media-bar module

// ES6
import SocialMediaBar from 'react-social-media-bar';

1. Import Font Awesome into your project. I recommend using the CDN. See here for directions.

Examples

Live demo: [to be implemented] To build the examples locally, clone this repo. Then run:

npm install
cd examples
npm install
npm start

Then open localhost:3000 in a browser window.

Props

Properties are passed into the SocialMediaBar as follows. These are the default values for each property. Note that not all properties are required.

<SocialMediaBar
  icons={[]}
  bgColor="rgba(0, 0, 0, 0)"
  iconColor="#000"
  iconOpacity={1}
  iconSize="1em"
  hoverColor="#000"
  hoverOpacity={1}
  margin={{top: '5px', right: '5px', bottom: '5px', left: '5px'}}
  padding={{top: '0px', right: '0px', bottom: '0px', left: '0px'}}
  sameTab={false}
  vertical={false}
/>

Property	Type	Required	Default	Description
icons	Array	yes	[]	The icons that will be rendered. See below for format.
bgColor	String	no	rgba(0, 0, 0, 0)	The background color of the component.
iconColor	String	no	#000	The color of each icon in the icons array when hovered over.
iconOpacity	Integer	no	1	The opacity of each icon in the icons array when hovered over.
iconSize	String	no	1em	The size of each icon in the icons array.
hoverColor	String	no	#000	The color of an icon in the icons array when hovered over.
hoverOpacity	Integer	no	1	The opacity of an icon in the icons array when hovered over.
margin	Object	no	{top: '5px', right: '5px', bottom: '5px', left: '5px'}	The margin on each icon in the icons array.
padding	Object	no	{top: '0px', right: '0px', bottom: '0px', left: '0px'}	The padding on each icon in the icons array.
sameTab	Boolean	no	false	If true, clicking on an icon will open its corresponding media link in the same tab. If false (by default), media links will open in a new tab.
vertical	Boolean	no	false	If true, the icons will be rendered vertically in a column. If false (by default), the icons will be rendered horizontally in a row.

Icons Property

The icons property is an Array of Objects in which each Object represents an icon to be included in this component. Each icon Object has the following key-value pairs. Note that if a key is not specified in this Object, the key inherits the value given to its corresponding property from the table above. If the property was not defined, the key is given the default value listed in the table above. For more clarification, please see the Examples.

Key	Value Type	Required	Description
media	String	yes	The Font Awesome icon name of the social media (i.e. 'github', 'facebook-official', 'youtube', ...)
link	String	yes	The URL to which this icon will link
iconColor	String	no	The color of this icon when hovered over.
iconOpacity	Integer	no	The opacity of this icon when hovered over.
iconSize	String	no	The size of this icon.
hoverColor	String	no	The color of this icon when hovered over.
hoverOpacity	Integer	no	The opacity of this icon when hovered over.
margin	Object	no	The margin on this icon.
padding	Object	no	The padding on this icon.
sameTab	Boolean	no	If true, clicking on this icon will open its link URL in the same tab. If false the link URL will open in a new tab.

Credits

• Dave Gandy, the awesome creator of Font Awesome
• Alan Smith and Noel Broda, who wrote articles on Medium to guide me through creating and publishing this React Component