How To Create A Social Follow Component in React

Introduction

When you’re building a web site, you’ll often want to share your Social Media accounts for visitors to follow. In this tutorial, you’ll create a Social Follow component in React, using the social media icons provided by Font Awesome.

When you’re done, you’ll have a component that looks like this:

Prerequisites

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment

Step 1 — Creating the Project

To get started, you’ll use Create React App which is a great tool for scaffolding React applications.

Open a new Terminal and run the following command to generate a new React app called my-app:

npx create-react-app my-app

Switch to the app and start the server:

cd my-app
npm start

To include the icons, you’ll use a package called react-font-awesome, which provides Font Awesome support for React.

You’ll need these three packages:

• @fortawesome/react-fontawesome
• @fortawesome/fontawesome-svg-core
• @fortawesome/free-brands-svg-icons

Install these with the following command:

npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

This installs all three packages and adds them as development dependencies in your package.json file.

You have your project configured. Now let’s build the component.

Step 2 — Creating the Social Media Component

Create a new file in your src folder called SocialFollow.js.

nano src/SocialFollow.js

This will be a functional component, so you’ll need to import React and then export your function. Add the following code to the file:

import React from "react";

export default function SocialFollow() {
  return (
    <div class="social-container">
      <h3>Social Follow</h3>
    </div>
  );
}

Save the file.

Then, to display this component, import and use it in the App.js file. Open the file in your editor:

nano src/App.js

Add this code at the top of the file to import the newly created component:

import SocialFollow from "./SocialFollow"

Then add the SocialFollow component inside of the return function, right above the closing div tag:

      </header>
      <SocialFollow />
    </div>

If you look at your application again, you’ll see the “Social Follow” text at the bottom of the screen.

Now that we have our component stubbed out, we need to update it with actual social media icons.

Step 3 — Using the Font Awesome Icons

You’ve installed Font Awesome and its React support, but to use it, you need to include FontAwesomeIcon from the react-fontawesome package.

Open src/SocialFollow.js in your editor and add this import to the top of the file:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Include the social icons you need from the free-brands-svg-icons package. For this example, use the icons for YouTube, Facebook, Twitter, and Instagram. Add these imports to the file:

import {
  faYoutube,
  faFacebook,
  faTwitter,
  faInstagram
} from "@fortawesome/free-brands-svg-icons";

Now add the icon for YouTube. We’ll use an anchor (<a>) tag with the href attribute set appropriately, and we’ll place a FontAwesomeIcon component inside of it. This FontAwesomeIcon component will then accept the faYouTube icon as a prop.

Add this code to the component:

 <div class="social-container">
      <h3>Social Follow</h3>
      <a href="https://www.youtube.com/c/jamesqquick"
        className="youtube social">
        <FontAwesomeIcon icon={faYoutube} size="2x" />
      </a>
</div>

We use a larger size (2x), and add youtube and social classes. We will style all of the social icons using the “social” class, and then give the appropriate coloring to each one using the more specific class name.

Add the rest of the icons using the same approach:

      <a href="https://www.youtube.com/c/jamesqquick"
        className="youtube social">
        <FontAwesomeIcon icon={faYoutube} size="2x" />
      </a>
      <a href="https://www.facebook.com/learnbuildteach/"
        className="facebook social">
        <FontAwesomeIcon icon={faFacebook} size="2x" />
      </a>
      <a href="https://www.twitter.com/jamesqquick" className="twitter social">
        <FontAwesomeIcon icon={faTwitter} size="2x" />
      </a>
      <a href="https://www.instagram.com/learnbuildteach"
        className="instagram social">
        <FontAwesomeIcon icon={faInstagram} size="2x" />
      </a>

Now, let’s make the icons look more attractive.

Step 4 — Styling the Component

We are able to display all of our social icons, but now we need to style them. To do so, we’ll add styles to the src/App.css file associated with the App component.

Open this file in your editor:

nano src/App.css

Let’s start by giving a background and some padding to the container of our icons. In the App.css file, add a couple of lines to give it a light grey background and some padding.

.social-container {
  background: #eee;
  padding: 25px 50px;
}

Now, let’s style all of the icons by giving them some breathing room and add a transition so that you can add a subtle hover effect. Set display to inline-block as you cannot transform an inline element:

a.social {
  margin: 0 1rem;
  transition: transform 250ms;
  display: inline-block;
}

Then, add the hover effect, which will make each icon move up slightly when you hover:

a.social:hover {
  transform: translateY(-2px);
}

Finally, give the appropriate colors to the icons. Add this code:

a.youtube {
  color: #eb3223;
}

a.facebook {
  color: #4968ad;
}

a.twitter {
  color: #49a1eb;
}

a.instagram {
  color: black;
}

We’ll use black for Instagram, as its logo is not one solid color. Open your app and you’ll see that the icons are the appropriate color and have some spacing:

Conclusion

Components in React are powerful because you can reuse them. Now that you have your Social Follow component created, you can move it around to any spot on your site or to another site altogether.