DEV Community: Emmanuel Yusuf

Mastering Styled Components with ease.

Emmanuel Yusuf — Wed, 22 Dec 2021 08:03:11 +0000

Styling the UI of a project is mostly a big deal for developers, especially when the developer has a lot of options at hand to choose from. Today we will be looking into Styled components, what it means, why we are choosing them, other options we can explore and their best practices.

Outline

What is Styled-Component and why?
Features and benefits?
Things to explore in Styled components
Conclusion
Reference

Prerequisite

Basic understanding of react js
Basic understanding of CSS
Node installed on your PC
Terminal (CMD or other terminals)

What is Styled Components and Why?

Styled Components is a CSS-IN-JS styling solution for React and React Native, It uses tagged template literals which allows you to write plain CSS that is scoped to a single component inside your JavaScript code.

Styled-Components is a library that's adopted by numerous companies and is one of the most starred libraries in the React ecosystem.

Features and Benefits

Automatic Critical CSS: Styled components automatically keep track of which component is rendered on the screen and inject only their style, when combined with code splitting you will be loading the least amount of codes which helps your project performance.
No ClassName bugs: it generates unique class names for every style, you will never have to worry about duplications or misspellings.
Easier deletion of CSS: If you are working on a large project codebase that makes use of clean CSS files, it mostly becomes tricky to keep track of unused classes, but with styled-components, every style is tied to a specific component. If a component is not used, it can easily be pointed out which can easily be deleted by deleting the component.
Dynamic Styling: Just like React, where props are passed into components, sometimes styles need to be adapted based on props, styled components make this easy and simple.
Painless Maintenance: it is easy to organize styles with styled components, and you don’t have to move across different files to find the file affecting your component.
Automatic Vendor Prefixing: for some of the new css features you might have to write the css properties for each browsers, but with styled components you can write your css to the current standard and the library will handle the rest.

Things To Explore in Styled Components

THEMING: with styled-components, you are given full support to theming which gives you the ability to create a theme or lay-down structure for the project style, theming mostly contains colors, sizes, fonts and other common things which will be used throughout the project to avoid repetition.

To create a theme with styled-components, the Theme Provider wrapper needs to be imported.

import { ThemeProvider } from "styled-components"

This theme provider needs a theme object that will hold the CSS styling or value we want to apply to the styled components.

    const theme = {
      color: {
        primary: "#000f55",
        secondary: "#04043f",
        white: "#fff",
      },
      fontSize: {
        large: "2.5rem",
        medium: "1.5rem",
        small: ".785rem"
      }
    }

This is an example of what a theme value can look like, it can be expanded to suit your use cases.

Let's say we have components with these styles.

    const Button = styled.button`
        padding: 4px .7rem;
        color: ${props => props.theme.color.white};
        background: ${props => props.theme.color.primary};
        font-size: ${props => props.theme.fontSize.small};
        border-radius: 8px;
    `

    const FlexWrapper = styled.div`
        display: flex;
        align-items: center;
        justify-content: center;
    `

To use it, we need to wrap the ThemeProvider around all the projects which are mostly done on the App.js file.

    <ThemeProvider theme={theme}>
        <FlexWrapper>
            <Button>Click Please</Button>
        </FlexWrapper>
    </ThemeProvider>

Looking at the code above, ThemeProvider has been used to wrap all the components on the project, which passes the styling down to all the child components with ease.

2.Global Styles: Creating a style that serves as a universal style is one thing a lot of developers want to achieve, especially when there is a style that needs to be added to override some styles, Styled components make this easier to achieve to create a global style we have to create a file to store the style

Firstly, create a file name “globalStyles.js” and set it up using this format:

    import { createGlobalStyle } from "styled-components/macro"

    export default createGlobalStyle`
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
    `

Looking at the code above, you can see that we are importing createGlobalStyle from the styled components which we are using to create the global style.

To use it, we have to import the component and add it to our App.js file:

    import GlobalStyles from "./globalStyles"

    function App() {
        return (
            <GlobalStyles />
            <AppContent />
        )
    }

3.Style Inheritance: Style Inheritance: Styled-component makes it possible to inherit styles from another styled component, which is simply done by passing it through the styled function.

    import styled from "styled-components"

    const Button = styled.button`
      padding: 4px 12px;
      border-radius: 4px;
      color: #fff;
      background: #000;
    `

Here is the button component, let create another variant of the component by inheriting some styles.

    const TransparentButton = styled(Button)`
      border: 1px solid #000;
      background: none;
      color: #000;
    `

The TransparentButton component will inherit all the styles from Button and update it with its own style.

4.Passing Props: Just like the regular react component that receives props to pass data, so as styles also need props to make the style dynamic, this is made possible with styled-components you can pass props through your styles.

The way styled-components handle their style is that it creates a React component that renders the HTML tags that correspond to the property in the styled object.

Let’s take, for example, we created a Button Component with this style:

    const Button = styled.button`
      padding: 4px 12px;
      border-radius: 4px;
      color: #fff;
      background: #000;
    `

In other to make it dynamic, we can set the background and color properties as props.

    const Button = styled.button`
      padding: 4px 12px;
      border-radius: 4px;
      color:${(props) => props.color ? props.color : '#fff'};
      background: ${(props) => props.bg ? props.bg : '#000'};
    `

Looking at this new structured component, the colour and background get the value of a prop, but if it’s not defined, it has been set to a default value, which has been achieved by creating a ternary condition as a check.

To use the component it will be structured like this

    <Button color="black" bg="orange">Clicked</Button>
    <Button>Click Me</Button>

5.Styling Regular Component: Another amazing thing about a styled component is that you can convert a React component into a styled component by just calling the styled() function and passing the component name inside, then the styling goes inside the string literal.

    function Button({props}) {
        return (
            <button className={props.className}>Click Me</button>
        )
    }

We want to convert the component to a styled component, we have a className attribute that has been passed as props to the component, in other to do this we will follow this process.

    Button = styled(Button)`
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid #000;
    `

This will style the component with the styles from the string literal which will then be rendered with the component.

6.Use with other CSS frameworks: Styled components can work with all CSS frameworks without any issue, which helps you customize styles coming from other frameworks with ease without issue.

For example, let’s create an input component with Bootstrap styling:

    const Input = styled.input.attrs({
        className: "form-control"
    })`
        background: #fff
    `

We use the attrs method to add a class name attribute with the value form-control. This adds bootstrap styling to the component.

This also works for other CSS frameworks, Let's say we are using tailwind then we should have something like:

    const TailwindInput = styled.input.attrs({
        className: "
          mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
          focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
          disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none
          invalid:border-pink-500 invalid:text-pink-600
          focus:invalid:border-pink-500 focus:invalid:ring-pink-500
        "
    })`
        background: #fff
    `

This code above works for tailwind just like the first one we talked about.

7.Special attributes: Adding Attributes to HTML tags is made possible with styled-components.

For example, let’s create a button component like this:

    const Button = styled.button`
        font-size: 0.75rem;
        font-weight: 700;
        padding: 8px 1.5rem;
        border: 1px solid green;
        color: green;
    `

Let's say we want to make it disabled, then we will need to introduce the disabled attribute which we can easily achieve by using the attrs method in styled-components.

    const Button = styled.button.attrs({
      disabled: true
    })`
        font-size: 0.75rem;
        font-weight: 700;
        padding: 8px 1.5rem;
        border: 1px solid green;
        color: green;
    `

Looking at the code above, we introduced this attrs method to the styled components which will help set the attribute disabled to true, which can come in handy probably, if we want to set the disabled value based on some conditions.

8.Switching Components types: Styled components dynamic nature helps a lot when it comes to changing the type of component you are rendering. Let’s take, for instance, you have a button component you may need to change to use as a link tag instead of the normal button tag, which you can follow this approach.

    const Button = styled.button`
        padding: 2px 5px;
        color: ${props => props.theme.color};
        border-radius: 3px;
    `

The button component will create and render the button element. we can easily change the render type when the component is been called by passing the “as” props to it with the type we want to use.

    <Button as="a">Go Back Home</Button>

This will render and create the component with the “a” tag element and apply every other thing from the component.

It can also be achieved by using the “withComponent” method.

     const Button = styled.button`
        padding: 2px 5px;
        color: ${props => props.theme.color};
        border-radius: 3px;
    `

    const Link = Button.withComponent("a")

The Link Component will render the anchor tag as a replica of the Button component, which is needed to avoid some level of duplication on the code base whereby one component can be used for different use cases.

Conclusion

Styled components have a lot of features that we can't touch in just one article, if you are interested in learning more about styled-components you can check the resources above out which can help understand the concept better.

Reference?

After looking at the tips above, you may find it interesting, but you don’t really get the concept of a styled component, or you are new to it, and you are willing to take some time to learn it, then I will be linking some resources here in which you can check out to get the needed knowledge to proceed with styled-components.

Creating A Reusable Speedometer Component.

Emmanuel Yusuf — Sun, 12 Dec 2021 11:04:44 +0000

Working on a project recently, I noticed that a speedometer is one of the functional components that are rare to find outside and a lot of developers are finding it so hard to come up with.

Speedometers can be used as a chart to display constantly updating data, to showcase real-time changes in something, and it gives the user a more friendly appeal they can relate to.

In this article, we will be creating a speedometer component, making it reusable and also looking into how to get data dynamically to work with.

Outline

Understanding components structure.
Understanding trigonometry and how to apply it to UI design.
Creating project structure.
Updating data dynamically.
Conclusion

Prerequisites

To understand this tutorial, you will need to have:

Basic Understanding of react JS
Node JS installed on your PC
A Text Editor (Preferably VS Code)
Terminal (CMD or any other terminals)

The speedometer part is divided into 3 parts which are the display, the speed loader and the indicator bar, The display serves as the main screen where info (numbers) is shown to the users, The Speed Loader serves as a moving progress bar to show the user the level they are and last, the indicator bar is the pinpoint that rotates around the speedometer as the data changes.

Understanding Trigonometry

Trigonometry is one of the basic mathematics topics introduced in school, though they don’t mention the use case or how it can be applied, it is one of the mathematical solutions that is been applied when it comes to solving motion problems. We will be able to work with degrees and see how we can go around a circle.

From the Project structure, we can carve it into a semi-circle which is divided into two parts that help to get the centre of the action, which is where the circles revolve around. This means that all the rotations we will be doing will revolve around the centre of the action.

Without much talk, let’s set up the project structure and move into coding the components themselves.

Project setup

Since we will be using react for the project, we need to first create a blank react project. Then we will install the necessary packages, firstly open your terminal and enter this command.

npx create-react-app Speedometer

Once you have successfully created the project, you should see something like this:

Then open the code in a text editor and, let’s clean up the file structure by removing what we will not need there. Go to the src folder and delete logo.svg, reportWebVitals.js, setupTests.js, App.test.js and App.css.

Open index.js and replace the code inside with this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Open app.js and replace the code inside with this also;

function App() {
  return (
    <div>
     Hello World
    </div>
  );
}
export default App;

Create two folders with the name: components and styles and open the components folder and create a file with the name speedometer.js inside, then open the styles folder and create a file with the name SpeedometerStyle.style.js and also a file name Wrapper.style.js.

We will be using styled-components for the styling, so we have to install styled-components to the project, go back to your terminal and install the package using this command.

yarn add styled-components

Now open the Wrapper.style.js file and add the following code inside:

import styled from 'styled-components';
export const Wrapper = styled.div`
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
`

Looking at the code above, we are importing the styled-components package we installed then we are using it to create a style we can be used everywhere on the project as a reusable component, the style set the width and height to 100vw and 100vh respectively, just for it to fill the user's screen and then centralize using flex.

Just to set up the style for the Speedometer itself, open the SpeedometerStyle.style.js file and add this code.

import styled from 'styled-components';

export const StyledSpeedometer = styled.div`
    width: 100%;
    max-width: 450px;
    margin-top: 3rem;
    .guage_body {
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: #000;
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
        position: relative;
        overflow: hidden;
    }
`

Looking at the style above, we are creating a rectangle with a width of 450px to get a semi-circle, making the guage_body width 100% and a 50% padding to the bottom, which will give us access to just 50% of the space we have. Then we use a border radius to the top left and top right of the rectangle, in other to perfectly curve it.
Lastly, we make the position relative so that the 'body' children position can be set independently without issues and overflow as hidden in the other to hide anything going out of the guage_body.

Go to Speedometer.js and add the following code:

import React from 'react'
import { StyledSpeedometer } from '../styles/SpeedometerStyle.style'
import { Wrapper } from '../styles/Wrapper.style'
const Speedometer = () => {
    return (
        <Wrapper>
            <StyledSpeedometer>
                <div className="guage_body"></div>
            </StyledSpeedometer>
        </Wrapper>
    )
}
export default Speedometer

Looking at the code above, we imported the styled-component we created for Wrapper and StyledSpeedometer, which is what we are using to construct the layout.

After the setup, let’s go to the App.js file and replace the code with this.

import Speedometer from "./components/Speedometer";
function App() {
  return (
    <Speedometer />
  );
}
export default App;

This is just using the speedometer component we have created to display the content, If it is successfully implemented, we should have something like this when we run the code with "yarn start" from the terminal.

Now let’s continue, add the following line of code inside your Speedometer.js file inside the guage_body div tag

<div className="guage_body_cover">
  <div className="guage_indicator_slider" />
</div>
<div className="guage_indicator" />

And open the SpeedometerStyle.style.js and update the style by adding this style inside the .guage_body section.

.guage_body_fill {
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    height: 100%;
    background: #000;
    transform-origin: center top;
    transform: rotate(0turn);
    transition: transform 0.2s ease-in-out;
}

.guage_indicator {
    position: absolute;
    width: 225px;
    height: 225px;
    top: 125%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center top;
    transform: rotate(0.3turn);
    border-radius: 50%;
    background: #000;
    z-index: 7;
    &::before {
    }
}

.guage_indicator_slider {
    width: 4px;
    height: 22rem;
    background-color: #000;
    transform-origin: center;
    transform: rotate(0.3turn);
    margin-bottom: 1rem;
}

.guage_body_cover {
    width: 97%;
    height: 200%;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

The output should be something like this:

Let’s move forward by adding the text board to the speedometer to get the numbers as it's changing, open your Speedometer.js file and update by adding this code to the below guage_indicator div.

<div className="text_content">
    <h3>100</h3>
    <p>Mbps</p>
</div>

And open the SpeedometerStyle.style.js and update the style by adding this style immediately after the guage_body class.

.text_content {
    position: absolute;
    top: 0;
    background-color: #000;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 55;

    h3 {
        font-size: 2.25rem;
        font-weight: 400;
        color: #fff;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    p {
        font-size: 1rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
        padding: 0;
        margin: 0;
    }
}

This style is to add style to the h1 tag and the paragraph tag, then position the text_content class to fit where we want it to be. We should have something like this once we are done

Our UI is ready. The next thing is to make it dynamic so that we can get data from external sources or backend and make it work perfectly without issue.

Updating Data Dynamically.

Just to get dummy data to use, we will be using random data with the JavaScript Math API, so let’s create a snippet that generates a number in every second so still inside the Speedometer.js file, update it by adding a useEffect and add this code inside, it should look like this:

// create a state to store the speed
const [speed, setSpeed] = useState(0)

// generates a random number between 0 and 35 every second
useEffect(() => {
    setInterval(function(){   
      setSpeed(Math.floor((Math.random()*35)+1)); 
    }, 1000);
}, [])

Looking at the code above, a speed state to store the speed, then a "useEffect" is used to run the interval immediately once the page loads, which updates every 1 second and using the Math.random function we create a random number from 0 to 35 and store it on the speed state.

We need to update the speedometer so that we can update it once the speed state change, To achieve this, we need to create a ref for some of our div tags and also use another useEffect to update it.

Firstly, let’s create our ref by creating a ref which will be hooked with some div tags, updating the code with

const turnRef = React.useRef(null)
const sliderRef = React.useRef(null)

Then update the div tags with this to link the div with the ref

<div className="guage_body_fill" ref={turnRef} />
<div className="guage_body_cover">
    <div className="guage_indicator_slider" ref={sliderRef} />
</div>

Lastly, let’s create another useEffect and add this code inside

useEffect(() => {
    const turn = speed >= 37.5 ? ((12.5 + 37.5) / 100) : ((12.5 + speed) / 100)
    turnRef.current.style.transform = `rotate(${turn}turn)`
    sliderRef.current.style.transform = `rotate(${turn + 0.25}turn)`
}, [speed])

Looking at the code above, we are using a useEffect that uses the speed as a dependency so that it will update once the speed value changes. Then we set a turn value which checks if the speed is greater and equal to 37.5. If yes, then it uses a fixed value which is (12.5 / 37.5) / 100. If no, then we will use (12.5 + speed) / 100.

The reason why we are using 12.5 is that the circle is not complete and to start from the circle cutout we are adding the value to the speed value. Once the speed is more than 37.5 we stop it from going through the cut-out by restricting it with a fixed value.

So it should look like this after the update.

If everything is done correctly as it is in this tutorial, you should get something like this once you run the server again.

Conclusion

Creating this speedometer component actually helps in learning some aspects in react which include a look into trigonometry, updating CSS values and dynamically passing data to update CSS value, This component can be used in many use cases to suit different purposes, including getting the data from a backend and updating the style to suit your need.

To get this code, check it up on GitHub, by using this link

https://github.com/EmmanuelOluwafemi/speedometer.git

This is the live link: https://speedometer-smoky.vercel.app/