Building react component with styled-components

Introduction

React has been an influential JavaScript library for developing interactive user interfaces(UIs) since its introduction. There are different ways to style React components, and one popular approach is using StyledComponents Official Site. This library allows developers to write actual CSS code to style your components.

Demo

In this blog post, we will:

1. Introduce StyledComponents and understand its advantages.
2. Provide a step-by-step guide to build a button using StyledComponent and React.

So, let's dive in!

What are StyledComponents?

StyledComponents is a CSS-in-JS library that enables developers to write encapsulated and reusable CSS code for their React components. It brings the best parts of CSS and JavaScript together, allowing you to style components with actual CSS while keeping the benefits of using React components.

Some advantages of using StyledComponents include:

• 💅 Styled Components allow you to use real CSS syntax directly in your JavaScript code.
• 🚀 Automatic generation of unique class names for each styled component, which helps avoid CSS class naming collisions.
• 🧠 Enables theming and dynamic styling based on component props and state.
• 📝 Easy to maintain, as the styling and component logic are all in the same place.
• 🏭 Scalable and modular, making it perfect for large applications with many components.

Building a Button using StyledComponent and React

Now that we have an overview of StyledComponents, let's create a simple button using this library and React.

Prerequisites

To follow along with this tutorial, you should have:

• A basic understanding of React and how to create components.
• Node.js and npm installed on your local development environment.

Let's get started!

Step 1: Set up a new React project

First, let's create a new React project using create-react-app:

npx create-react-app react-styled-button

After your project has finished setting up, navigate into the project folder:

cd react-styled-button
npm install

Step 2: Install Styled Components

Next, install the styled-components package:

npm install styled-components

Step 3: Create a new Button component

Now, let's create a new folder called components inside the src folder. Inside the components folder, create a new file called StyledButton.jsx. This will be our custom button component.

Open StyledButton.jsx and add the following code to import React and Styled Components:

import React from "react";
import styled from "styled-components";

// Define the styles for the button
const Button = styled.button`
  /* Basic styles */
  font-size: ${(props) =>
    props.size === "small" ? "12px" : props.size === "large" ? "24px" : "16px"};
  padding: ${(props) =>
    props.size === "small"
      ? "6px 12px"
      : props.size === "large"
      ? "16px 32px"
      : "10px 20px"};
  background-color: ${(props) =>
    props.disabled ? "gray" : props.color ? props.color : "SteelBlue"};
  color: white;
  border: none;
  border-radius: 4px;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  &:hover {
    opacity: 0.8;
  }
`;

function StyledButton(props) {
  const handleClick = () => {
    if (!props.disabled && props.onClick) {
      props.onClick();
    }
  };

  return (
    <Button
      onClick={handleClick}
      size={props.size}
      color={props.color}
      disabled={props.disabled}
    >
      {props.children}
    </Button>
  );
}

export default StyledButton;

Step 4: Use the Button Component

Finally, let's use our new button component in our React application. In a new file named App.js, add the following code:

import React from 'react';
import StyledButton from "./components/StyledButton";

function App() {
  return (
    <div>
      <StyledButton size="large" color="teal">
          Click me!
      </StyledButton>
    </div>
  );
}

export default App;

This code imports our Styled Button component and renders it with a label of "Click me!".

Step 5: Test it out!

That's it! Save your changes and start your React app by running npm start or yarn start. You should now see a teal button with white text and rounded corners that says "Click me!".

Conclusion

In this tutorial, we've shown you how to create a React button component using Styled Components. With this knowledge, you can now use Styled Components to style any React component you create. It simplifies the process of writing CSS for your React components and makes it easier to maintain and reuse your code.

Code available at :
Codesandbox