DEV Community: Daniel Adewale

Understanding styled-components: A basic guide on styled-components usage with React/Next/Vue

Daniel Adewale — Sun, 22 Oct 2023 11:28:05 +0000

What is styled-components?

Styled-components is a styling library/package that lets you write CSS in Javascript while simultaneously creating and building custom components whose styles can be dynamic.

These built components can be dynamic and reusable, by providing relative properties to the "styled component". Also, one of the styled components' advantages, is the naming complex identifiable to basic JSX reusable components and organized structure relative to fragments and component folders.

What to know forehand?
To understand styled-components easily you need to have basic or quite advanced knowledge of the following:

Javascript or Typescript
One of React, Next, Vue or any other related Javascript Library.
CSS
HTML semantics

Installation

styled-components like other libraries/packages are mainly added to projects by installation and can be found in the NPM and Yarn registry.

Basic installation with NPM

npm install styled-components

or with yarn,

yarn add styled-components

After successful package installation and our package can be found in the package.json file, styled-components is now ready for usage.

Writing your first styled component

The first step to writing styled-components is creating a file with a .js or .ts extension and importing it as a module on that file.

import styled from "styled-components"

After importing, we write a basic styled-components' syntax;

import styled from "styled-components"

const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

As seen above, we declared a variable Text whose value contains our helper methods which are HTML tags and can be h1, button, div and any other you can think of and in our case right now, it is the p method and these methods are called using an obscure JavaScript feature known as “tagged template literals” or "backticks".

Having written our first styled component, we want to learn how to add the component and make it part of the JSX.

How it works

Adding the already-created styled component into the JSX works by just adding it as a component in the JSX with the variable name as the tag name.

import styled from "styled-components"

const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

const TextComponent = () => {
  return(
      <div>
        <Text>Hello Devs</Text>
      </div>
  )
};

The styled component declaration was made in the same file as the base component so along with time, when the file gets bulky, there is a need to separate the style from the actual JSX file which earlier on we talked about having the style in a .js or .ts file.

So, we create a .js or .ts file, import styled-components and add the style declaration but there is one more thing; exporting the style variable as a named export.

style.js

import styled from "styled-components"

export const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

After exporting the style variable as a named export, we can then import it into our JSX file based on the directory of the style file

import { Text } from "./style" 

const TextComponent = () => {
  return(
      <div>
        <Text>Hello Devs</Text>
      </div>
  )
};

Adding Props

As said earlier, one of the advantages of styled-components is the ability to build custom components whose styles can be dynamic and reusable.

In the quest to make components' styles dynamic, it is effective to use props and from basic knowledge of props, they are values dynamic to a component that originates from a base declaration comprising similar identities. Prop values affect only the component that provides the value.

Based on the fact styled-components is CSS in Javascript, we can write javascript conditions to provide styles based on prop values.

How it works

import styled from "styled-components"

export const Text = styled.p`
    color: ${p => p.color || blue};
    font-size: 16px;
    padding: 4px;
`;


const TextComponent = () => {
  return(
      <div>
        <Text color="red">Hello Devs</Text>
        <Text color="green">Hello Devs</Text>
        <Text>Hello Devs</Text>
      </div>
  )
};

As seen above, the color props were passed and the Text components that have the dynamic values would possess their color style while components that are not passing values would possess the default blue color.

Passing props in Typescript

Passing props in typescript basically has an addition which is defining types for the values.
Let's have an example and use interface

import styled from "styled-components"

interface Props {
  color?: string;
  fontSize?: string;
  hasBiggerSpace?: boolean;
} 

export const Text = styled.p<Props>`
    color: ${p => p.color || blue};
    font-size: ${p => p.fontSize || 16px};
    padding: ${p => p.hasBiggerSpace ? '10px' : '4px'};
`;

const TextComponent = () => {
  return(
      <div>
        <Text color="red" fontSize="20px" hasBiggerSpace={true}>Hello Devs</Text>
      </div>
  )
};

NOTE: It is not a must to pass a default value when doing conditions for props. CSS attributes inside the method can receive values without fallback.

color: ${p => p.color};

CONCLUSION:

Styled-components is a great styling library for use for its many advantages most especially dynamism. In most cases, I would recommend it.

Image file previewing with ReactJs.

Daniel Adewale — Sat, 27 Aug 2022 10:22:23 +0000

Introduction

Have you been wondering why it has been challenging how you can preview uploaded image files on your ReactJs application? Learning ReactJs, it is important to be aware of the learning roadmap in order to be efficient and knowledgeable in building web apps. But it is normal to get caught up on specific tasks, face new challenges and discover new things as this is what software development entails

Why is Image file preview necessary?
Of course, talking about User experience, as a Software Developer and Front End Engineer, it is advisable and it is common knowledge to put the users first and make sure the application usage is smooth and convincing to use.

Usage of React form for Image upload

From the common knowledge of HTML5, the form input element can be used to take in different data or information from users which this information includes texts, numbers, colors, files, and many more...

A basic form element is as below:

<input type='text' />

So basically, the type attribute of an input element determines the kind of information which is to be received from the users. So relating, we would be receiving an input type of file from the user because an image is an example of a file.

<input type='file' />

After understanding this, we want to dive into the ReactJs part of things. The syntax for React forms has great similarity with HTML5 and Vanilla Javascript but collecting the input value is slightly different. Collecting Input values in ReactJs involves the use of one of React hooks named useState.

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})
  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
    </div>
  );
}

Looking at the code above, the first line shows the importation of the React hook 'useState'. Also, we have the declaration of our App functional-based component returning the jsx aspect of the application.

The state variable

As shown above, the useState hook was used to create our state variable which collects and reserves our image file from the input element in the application.

Declaration

const [image, setImage] = useState({})

<input type='file' onChange={(e) => setImage(e.target.files)} />

Having added the image from the User aspect, the file selected stores inside the image state which will be rendered in our application.

Previewing the Image

After storing the image file in the image state, we want to look at the image content by previewing the image using the img element in our application

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})

  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
        {
          image && image.length > 0 ?
            <img 
              src={URL.createObjectURL(image[0])}
              alt='Alternate text'
              width={300}
            />
            : null        
        }
    </div>
  );
}

Checking the code above, we rendered the image element and also read the image file by setting the value of the img source with the image state and also reading the object URL to interpret the file to the source attribute.

As seen below, the image state is of data type Array and the first element of the image Array was passed as an argument to the URL.createObjectURL() function.

<img 
    src={URL.createObjectURL(image[0])}
    alt='Alternate text'
    width={300}
/>

Before that, we did a conditional rendering to check if the image is already selected and is in the image state because the function URL.createObjectURL() will result in a compilation error when the image is not selected yet and we only want to render/show the image when it is only selected.

Conclusion
Thanks for reading. In this article, we get a basic idea of how to preview uploaded Image files with ReactJs. This was a simple and effective way of previewing uploaded image files. If you enjoyed the article give it a thumb, subscribe, and watch out for more articles.

You can test the code above here! -