Forem: Savannah TechStack

React Context Api using TypeScript

Savannah TechStack — Wed, 29 Jun 2022 20:59:44 +0000

Introduction

React Context API provides a way to pass data down the component tree without passing props. It's useful when passing down data that is Global for a component tree. For example, current authenticated user, theme, and preferred language in a multi-lingual app. It helps avoid props drilling problem.
We will build an app with several components where a global state of whether the user is logged in or not will be maintained. This state will be shared across components via context.

If you would prefer to follow this tutorial on YouTube it's available at the link below.

The final solution is available on GitHub

tndungu / React-Context-Api-Project

An application that uses Context Api to manage global state of logged in user

React Context Api Project

An app with 3 components, Login, Home and Settings, that demonstrates managing of Global state using React Context. LoggedIn flag for the user is provided from a Context Provider and other components subscribe to context changes to know whether a user is logged in or not. The app is created using React and TypeScript.

Local Setup

Clone the Repository using the following command: git clone https://github.com/tndungu/React-Context-Api-Project.git
Open the Repository using your favorite text editor. I use Visual Studio Code as a personal preference.
Open terminal and run the following: npm install
Run the project using npm start. This will open the project in http://localhost:3000

Video

There is a step by step guide on building the project on YouTube.

View on GitHub

Prerequisites

This tutorial assumes you have some basic knowledge of using TypeScript with React. You may go through TypeScript with React Tutorial to get started.

App Development: Step by Step Guide

To start a new typescript app, use the following command

yarn: ```TypeScript

yarn create-react-app context-typescript-app --template typescript

- **npm**:
```TypeScript


npx create-react-app context-typescript-app --template typescript

cd into student-app and yarn start OR npm start if using npm.

In the src folder, we will create a folder called components. Inside the folder lets create 3 simple components Login, Home and Settings. They will look as follows:



//Login.tsx
export const Login = () => {
    return (
        <>
            <div className="pageLayout">
                <div>
                    <h3>Login</h3>
                </div>
                <div>
                    <button>Login</button>
                </div>
            </div>
        </>
    );
};



//Home.tsx
export const Home = () => {

    return (
        <div className='pageLayout'>
            <div>
                <h3>Home Page</h3>
            </div>

            <div>
            </div>
        </div>
    )
}



//Settings
export const Settings = () => {
    return (
        <div className='pageLayout'>
            <div>
                <h3>Settings</h3>
            </div>

            <div>
            </div>
        </div>
    )
}

Import the components in the App.tsx file.



import './App.css';
import { Home } from './components/Home';
import { Login } from './components/Login';
import { Settings } from './components/Settings';

function App() {

  return (
    <>
      <Login />
      <Home />
      <Settings />
    </>
  );
}

export default App;

Add the following Styles to the App.css file.



.App {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pageLayout{
  display: flex;
  align-items: center;
  justify-content:space-between;
  border: 0.1rem solid tomato;
  border-radius: 0.3rem;
  width: 50%;
  height: 100px;
  margin: 10px;
}
button{
  width: 100px;
  height: 25px;
  background-color: aqua;
  border-radius: 5px;
  cursor: pointer;
}

div{
  margin: 10px;
  min-width: 100px;
}
.title{
  max-width: 100px;
}

At this point, if you save all the files and run the app it should look like the below.

Create Context

In the App.tsx, we will create a context that will hold the state loggedIn which will be true if a user is logged in and false if a user is not logged in.



import './App.css';
import { Home } from './components/Home';
import { Login } from './components/Login';
import { Settings } from './components/Settings';
import { createContext, useState } from 'react'

export const LoginContext = createContext({ loggedIn: false, setLoggedIn: (loggedIn: false) => { } })

function App() {
  const [loggedIn, setLoggedIn] = useState<boolean>(false)

  return (
    <LoginContext.Provider value={{ loggedIn, setLoggedIn }}>
      <Login />
      <Home />
      <Settings />
    </LoginContext.Provider>
  );
}

export default App;

In the code above, LoginContext will have an object with 2 properties loggedIn which is a boolean value and setLoggedIn which is a function hook that is used to set the loggedIn value.
The LoginContext object comes with Provider React Component that allows consuming components to subscribe to context changes. We will pass a value prop to LoginContext.Provider. This value will be propagated down the component tree to every component that subscribes to context changes.

useContext

We have created the context now it's time to consume it. In the components folder, let's add the simple component DisplayLogin.tsx which looks as follows. In addition, let's make the following changes to Login.tsx.



//DisplayLogin
export const DisplayLogin = () => {
  return (
    <div><h3>User is Logged in</h3></div>
  )
}



//Login.tsx
import { useContext } from 'react'
import { LoginContext } from '../App'
import { DisplayLogin } from './DisplayLogin';

export const Login = () => {
    const { loggedIn, setLoggedIn } = useContext(LoginContext)

    return (
        <>
            <div className="pageLayout">
                <div>
                    <h3>Login</h3>
                </div>{!loggedIn &&
                    <DisplayLogin />
                }
                <div>
                    <button onClick={() => setLoggedIn(!loggedIn)}>Login</button>
                </div>
            </div>
        </>
    );
};

From the Login.tsx component above, we have used the useContext hook to subscribe and consume the LoginContext. This enables us to get the global variable within Login.tsx without passing props. If you run the app, it should display as follows. Once you click the button, the message 'User is Logged in' is displayed.

Lets subscribe in the Home and Settings components as well. The 2 components will now look as follows:



//Home.tsx
import { useContext } from 'react'
import { LoginContext } from '../App'
import { DisplayLogin } from './DisplayLogin';

export const Home = () => {
    const { loggedIn, setLoggedIn } = useContext(LoginContext)
    return (
        <div className='pageLayout'>
            <div>
                <h3>Home Page</h3>
            </div>
            {!loggedIn &&
                    <DisplayLogin />
                }
            <div>
            </div>
        </div>
    )
}



//Settings
import { useContext } from 'react'
import { LoginContext } from '../App'
import { DisplayLogin } from './DisplayLogin';

export const Settings = () => {
    const { loggedIn, setLoggedIn } = useContext(LoginContext)

    return (
        <div className='pageLayout'>
            <div>
                <h3>Settings</h3>
            </div>
            {!loggedIn &&
                <DisplayLogin />
            }
            <div>
            </div>
        </div>
    )
}

At this point, if you click the Login button, the message 'User is Logged in' is displayed on all components. This is because we have subscribed to the context of all the 3 components.

Refactoring Context

The useContext() has been used in all components. This is not best practice since it means we're exposing the whole context in every component whereas it might not be necessary to do so. In addition, there are duplications in our code. So we need to move our Context code to its file. We can also create a custom hook to wrap LoginContext.Provider. The final code will look as follows:



//App.tsx

import './App.css';

import { Home } from './components/Home';

import { Login } from './components/Login';

import { Settings } from './components/Settings';

import { LoginProvider } from './Context/LoginContext'

function App() {

return (

    <LoginProvider>

      <Login />

      <Home />

      <Settings />

    </LoginProvider>

  );

}

export default App;



// Context/LoginContext

import React, { useState, createContext } from "react";

interface LoginProviderProps{

  children: React.ReactNode

}

export const LoginContext = createContext({loggedIn: false,setLoggedIn: (loggedIn: boolean) => {}});

export const LoginProvider = ({ children }: LoginProviderProps) => {

const [loggedIn, setLoggedIn] = useState(false);

return (

    <LoginContext.Provider value={{ loggedIn,setLoggedIn }}>

      {children}

    </LoginContext.Provider>

  );

};



//useLoginContext

import {useContext} from 'react'

import { LoginContext } from '../Context/LoginContext'

export const useLoginContext = () => {

  return useContext(LoginContext)

}



//Home.tsx

import { useLoginContext } from './useLoginContext'

export const Home = () => {

    const { loggedIn } = useLoginContext()

<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">pageLayout</span><span class="dl">'</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">h3</span><span class="o">&gt;</span><span class="nx">Home</span> <span class="nx">Page</span><span class="o">&lt;</span><span class="sr">/h3</span><span class="err">&gt;



            </div>

            {loggedIn &&

                    <div><h3>User is Logged in</h3></div>

                }

            <div>

            </div>

        </div>

    )

}



//Login.tsx

import { useLoginContext } from "./useLoginContext";

export const Login = () => {

    const { loggedIn, setLoggedIn } = useLoginContext()

<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;&gt;</span>
        <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">pageLayout</span><span class="dl">"</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                <span class="o">&lt;</span><span class="nx">h3</span><span class="o">&gt;</span><span class="nx">Login</span><span class="o">&lt;</span><span class="sr">/h3</span><span class="err">&gt;



                </div>

                {loggedIn &&

                    <div><h3>User is Logged in</h3></div>

                }

                <div>

                    <button onClick={() => setLoggedIn(!loggedIn)}>{loggedIn ? 'Logout' : 'Login'}</button>

                </div>

            </div>

        </>

    );

};



//Settings

import { useLoginContext } from './useLoginContext'

export const Settings = () => {

    const {loggedIn } = useLoginContext()

<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">pageLayout</span><span class="dl">'</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">h3</span><span class="o">&gt;</span><span class="nx">Settings</span><span class="o">&lt;</span><span class="sr">/h3</span><span class="err">&gt;



            </div>

            {loggedIn &&

                    <div><h3>User is Logged in</h3></div>

                }

            <div>

            </div>

        </div>

    )

}

Conclusion

Congratulations! You have gone through all that is required to create and use Context in React using TypeScript. Context API is a popular way of managing the global state for small to medium-level applications. For large-scale applications, REDUX might be a better way of managing the state.
Feel free to comment below in case you need further assistance.

TypeScript with React Tutorial

Savannah TechStack — Sat, 25 Jun 2022 18:58:56 +0000

Introduction

TypeScript has grown to be one of the most popular and widely used programming language in web development. TypeScript is a superset of JavaScript. That simply means TypeScript is essentially JavaScript with some additional features. The goal of TypeScript is to write strongly typed JavaScript. Strong typing helps to scale web applications with minimal bugs. TypeScript code is converted to JavaScript by use of a compiler like TypeScript Compiler or Babel.

For a better understanding, we will develop a Student Application using React and TypeScript. This tutorial will give you everything you need to get started with TypeScript in your next project.

If you would prefer to follow this tutorial on YouTube it's available at the link below.

The final solution is available on GitHub

tndungu / React-TypeScript-StudentApp

React TypeScript Student App

A Student App using React TypeScript. Includes features like Type Inference, Type Annotation, Union Types, Interfaces, Enums and Generics.

Local Setup

Clone the Repository using the following command: git clone https://github.com/tndungu/React-TypeScript-StudentApp.git
Open the Repository using your favorite text editor. I use Visual Studio Code as a personal preference.
Open terminal and run the following: npm install
Run the project using npm start. This will open the project in http://localhost:3000

Video

There is a step by step guide on building the project on YouTube.

View on GitHub

Prerequisites

This tutorial assumes you have some basic knowledge of React

Why use TypeScript?

There are many benefits of using typescript. The main ones are listed below:

Strong typing ensures bugs are caught during development as opposed to being caught while the application is in Production. Also makes it easy to debug code.
Documentation - It serves as documentation for JavaScript code making it easy to read and maintain.
Saves development time.
Generics in TypeScript provides a powerful type system that gives developers a lot of flexibility.

Student App in TypeScript

We will build an app using React that will cover the following aspects of TypeScript.

Props
Type inference vs Type annotation
Union Types
Organizing interfaces
Enums
Generics

App Development: Step by Step Guide

To start a new typescript app, use the following command

yarn:

yarn create-react-app student-app --template typescript

npm:

npx create-react-app student-app --template typescript

cd into student-app and yarn start OR npm start if using npm.

Props

We will start by passing a prop to the <App/> component. It will be a string that will have the name of the app. Here we will see our first use case for TypeScript.
Modify the App.tsx and index.tsx files to look as below. Delete the App.test.tsx file.

//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App name="Student App" />
  </React.StrictMode>
);

//App.tsx
export interface AppName {
  name: string;
}

function App({ name }: AppName) {
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}

export default App;

On your browser, you should be able to see Student App displayed. As we can see, AppName is an Interface that has a property called name.
An Interface is an abstract type that the compiler uses to know which property names a given object can have. It's used for type checking.
In the AppName Interface, the property name is a string, that's why we are passing a string to the App component. If you try to pass any other type like integer or boolean the App will give an error. It will not even compile. If you were not using TypeScript, the app will compile but give unexpected results later after deployment.

Type inference vs Type annotation

const [studentId,setStudentId] = useState(0)

setStudentId('test')

If you try the code above, it will not compile, typescript will give an error. This is because typescript has already inferred the type of studentId to be an integer(number). If you try to assign a string to studentId will therefore generate an error at compile time. This is referred to as type inference in TypeScript.

Similarly, the code below will not run in TypeScript.

const [student, setStudent] = useState(null)

setStudent({
  name: 'Antony',
  surname: 'Ndungu',
  age: 15
})

This is because TypeScript infers the student object to be of type null and therefore we have to explicitly define the student object and in the useState() hook we have to tell TypeScript user can be either null or student object. This is referred to as Type annotation. We will do that using the Student interface. The final code of our App.tsx will look as follows:

import { useState } from "react";
import './App.css'

export interface AppName {
  name: string;
}

export interface Student {
  name: string;
  surname: string;
  age?: number;
  address?: {
    houseNo: number;
    street: string;
    Town: string;
  }
}

function App({ name }: AppName) {
  const [student, setStudent] = useState<Student | null>(null)

  const addStudent = () => {
    setStudent({
      name: 'Antony',
      surname: 'Ndungu',
      age: 20
    })
  }

  return (
    <div className="App">
      <h1>{name}</h1>
      <p><b>{student?.name} {student?.surname}</b></p>
      <button onClick={addStudent}> Add Student</button>
    </div>
  );
}
export default App;

From the above code, the student can either be null or Student object. This is denoted by the code useState<Student | null>(null). This introduces another concept called Union Types.

Union Types

This is when you have an object that can be of having different types. For instance you might have const [student, setStudent] = useState<Student | null | boolean>(null). In this case Student | null | boolean are Union Types.

Organizing Interfaces

There are 2 issues as far as our interfaces are concerned:

We should not nest objects as we have done in the Student interface. Instead, we should have another interface for Address.
The Interfaces should be on their separate module for ease of maintenance and re-use.

We will create a new Interface for Address. We will then create a new module for interfaces by creating an interfaces.ts file inside the src folder and moving the interfaces there. We will then import our interfaces in the App.tsx file. The final App.tsx and Interfaces.ts files will look as follows:

//App.tsx
import { useState } from "react";
import './App.css'
import { Student, AppName } from './interfaces'

function App({ name }: AppName) {
  const [student, setStudent] = useState<Student | null>(null)

  const addStudent = () => {
    setStudent({
      name: 'Antony',
      surname: 'Ndungu',
      age: 20
    })
  }

  return (
    <div className="App">
      <h1>{name}</h1>
      <p><b>{student?.name} {student?.surname}</b></p>
      <button onClick={addStudent}> Add Student</button>
    </div>
  );
}

export default App;

//interfaces.tsx
export interface AppName {
  name: string;
}

export interface Address {
  houseNo: number;
  street: string;
  Town: string;
}

export interface Student {
  name: string;
  surname: string;
  age?: number;
  address?: Address
}

Enums

An Enum is a type for holding constant values. In our example, the student level can either be "Undergraduate" or "Postgraduate".

export enum Level {
  Undergraduate = "Undergraduate",
  Postgraduate = "Postgraduate"
}

The above enum can be used to conditionally display the age of a student based on the student's level as shown below:

{
  student?.level === Level.Undergraduate &&
  <p><b>Age: {student.age}</b></p>
}

Generics

Generics are an important feature of TypeScript that is used for creating reusable components. The same component can be used to handle different data types as shown below.

Display both Students' and Courses' lists using the same component.

For our student App, I would like to display 2 lists: One for the students' list and another one for the courses' list. Without generics, I will end up creating 2 components that will be used to display the 2 lists. However, with Generics I will use only one component to display both lists. The DisplayData component can be re-used to display any list of items even as our app grows bigger.

In src folder, I have created DisplayData.tsx component. The file looks as follows:

interface Item {
  id: number;
}

interface DisplayDataItem<T> {
  items: Array<T>
}

export const DisplayData = <T extends Item>({ items }: DisplayDataItem<T>) => {
  return (
    <>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{JSON.stringify(item)}</li>
        ))}
      </ul>
    </>
  )
}

Interface Item has a property id which means any object that uses this component must have an id property. Interface DisplayDataItem<T> is an object that represents an Array<T> of type T which means it can be used by any object which consists of an array of items. DisplayData is a function that accepts an array of items and displays the list.
The following is the final code for App.tsx, App.css and data.ts files.


//App.tsx
import { useState } from "react";
import './App.css'
import { Student, AppName, Level } from './interfaces'
import { studentList, coursesList } from "./data";
import { DisplayData } from "./DisplayData";

function App({ name }: AppName) {
  const [student, setStudent] = useState<Student | null>(null)

  const addStudent = () => {
    setStudent({
      name: 'Antony',
      surname: 'Ndungu',
      age: 20,
      level: "Undergraduate"
    })
  }

  return (
    <div className="App">
      <h1>{name}</h1>
      <p><b>{student?.name} {student?.surname}</b></p>
      {student?.level === Level.Undergraduate &&
        <p><b>Age: {student.age}</b></p>
      }
      <button onClick={addStudent}> Add Student</button>
      <h3>List of Students</h3>
      <div>
        <DisplayData items={studentList} />
      </div>
      <h3>List of Courses</h3>
      <div>
        <DisplayData items={coursesList} />
      </div>
    </div>
  );
}

export default App;

//data.ts
export const studentList = [
  { id: 1, name: 'Antony', surname: 'Ndungu', level: 'Undergraduate', age: 20 },
  { id: 2, name: 'Chanelle', surname: 'John', level: 'Postgraduate', age: 50 },
  { id: 3, name: 'Ian', surname: 'Smith', level: 'Undergraduate', age: 46 },
  { id: 4, name: 'Michael', surname: 'Starke', level: 'Postgraduate', age: 64 },
  { id: 5, name: 'Chris', surname: 'De Kock', level: 'Undergraduate', age: 19 },
]

export const coursesList = [
  { id: 1, code: 'A141', name: 'Algorithms Analysis', description: 'Analysis & Design' },
  { id: 1, code: 'BN445', name: 'Computer Architecture I', description: 'Computer Architecture' },
  { id: 1, code: 'P888', name: 'Operations Research', description: 'Maths - Operations Research' },
  { id: 1, code: 'Z9989', name: 'Discrete Maths', description: 'Discrete Mathematics' }
]

.App {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

li{
  list-style-type: none;
}

button {
  height: 30px;
  width: 150px;
  background-color: turquoise;
  border-radius: 5px;
}

Generic Search Function

Finally, we will add a Generic search where the student list can be sorted based on either student name or Age on a button click.
Create a GenericSort.ts file and ensure you have the following code. This code takes a list of array items and key for sorting then returns the sorted list. For example, if I would like to sort the student's list based on student name I will call the function GenericSort(studentList,"name")
This is a powerful use case for generics, I can use it if I want to sort the student records list based on different sorting columns. Implementing this without TypeScript would end up with many functions that are difficult to extend.

//GenericSort
export const GenericSort = <T,>(items: Array<T>, key: keyof T) => {

  items.sort((a, b) => {
    if (a[key] > b[key]) {
      return 1;
    }
    if (a[key] < b[key]) {
      return -1;
    }
    return 0;
  })
  return items
}

//App.tsx
import { useState } from "react";
import './App.css'
import { Student, AppName, Level } from './interfaces'
import { studentList, coursesList } from "./data";
import { DisplayData } from "./DisplayData";
import { GenericSort } from "./GenericSort";

function App({ name }: AppName) {
  const [student, setStudent] = useState<Student | null>(null)
  const [list, setList] = useState(studentList)

  const addStudent = () => {

    setStudent({
      name: 'Antony',
      surname: 'Ndungu',
      age: 20,
      level: "Undergraduate"
    })
  }

  const sortData = () => {

    GenericSort(studentList, "age")
    setList([...studentList])
  }
  return (
    <div className="App">
      <h1>{name}</h1>
      <p><b>{student?.name} {student?.surname}</b></p>
      {student?.level === Level.Undergraduate &&
        <p><b>Age: {student.age}</b></p>
      }
      <button onClick={addStudent}> Add Student</button>
      <br />
      <button onClick={sortData}>Sort Data</button>
      <h3>List of Students</h3>
      <div>
        <DisplayData items={list} />
      </div>
      <h3>List of Courses</h3>
      <div>
        <DisplayData items={coursesList} />
      </div>
    </div>
  );
}

export default App;

Conclusion

Awesome! at this point, you have gone through the core building blocks of building a React App using TypeScript. In the final part of our project, we went through an introduction to some advanced features of TypeScript, Generics.
Happy coding with TypeScript.
Feel free to comment below in case you need further assistance.

Styled Components in React - All you need to know

Savannah TechStack — Mon, 06 Jun 2022 22:29:37 +0000

Introduction

React by definition follows Component-based architecture approach where the components represent specific screens or elements in the app. This has given rise to the need of having CSS styles that can be managed in component based manner. Traditionally in a web application development, CSS has been managed in one external CSS file eg index.css or just a couple of Stylesheets (CSS Modules) which manage styling for the entire app. You would then pass the attributes as a string on the className prop.

There are some problems with this approach:

If not properly structured, CSS stylesheet or module can become too large and complex as the app grows which makes the app styles difficult to manage.
Since the stylesheet is large and complex, its difficult to refactor and remove unnecessary styles that are not in use.
It is easy to have clashing class names for complex app.
Its due to the issues above and the need to have a component-based way of managing CSS that styled components come in handy.

If you would prefer to follow this tutorial on YouTube its available at the link below.

A complete working solution is available on Github

tndungu / Styled-components-React

Show the use of styled components in React

Styled Components - All you need to know

This project has the final app after modification as per the YouTube tutorial video below.

Local Setup

Clone the Repository using the following command: git clone https://github.com/tndungu/Styled-components-React.git
Open the Repository using your favorite text editor. I use Visual Studio Code as a personal preference.
Open terminal and run the following: npm install
Run the project using npm start. This will open the project in http://localhost:3000

Video

There is a step by step guide on building the project on YouTube.

View on GitHub

Styled components

Styled components is a library for styling React app, allows use of CSS-in-JavaScript. Using styled components has the following key advantages:

By focusing on single use case, the developer has a better experience managing CSS.
The users experience is enhanced, styled-components keeps track of the components that are being rendered on page and injects their styles and nothing else. Combined with code splitting, the app will load faster.
Easier deletion of unused CSS - Maintenance of CSS is easy, its easy to see which styles are not in use and delete them.

Installation

with npm

npm install --save styled-components

with yarn

yarn add styled-components

Getting Started

styled-components uses tagged template literals to style the components. The created styles are normal React components that has styles attached to it.

The example below creates a wrapper and a title components with styles attached to it:

import styled from "styled-components";

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: #e5d9c5;
`;

const App = () => {

  return (
    <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
  );
};

export default App;

Output

Adapting Based on Props

You can pass a function (interpolated function) to styled component's template literal to adapt it based on component props. This means if you have a blue button and now you need a red one, there is no need of having 2 components you can conditionally adapt based on component's props. See below example.

import styled from "styled-components";

const Button = styled.button`
  /* Adapt the background colors based on backgroundColor prop */
  background: ${props => props.backgroundColor === 'blue' ? "blue" : "red"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const App = () => {

  return (
    <div>
    <Button backgroundColor='blue'>Blue Button</Button>
    <Button backgroundColor='red'>Red Button</Button>
  </div>
  );
};

export default App;

Output

Extending Styles

Occasionally you might need to use an existing style but make some change for one instance. Since its a single case, you don't need to use interpolated function like we did above, its better to make a new component that inherits styling of another component. This is done by wrapping it in the styled() constructor as shown below.

import styled from "styled-components";

const Button = styled.button`
  background: yellow;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
background: tomato;
`
const App = () => {
  return (
    <div>
    <Button>Yellow Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
  );
};

export default App;

Output

The "AS" Polymorhic Prop

Sometime you might need to change the final tag or component that is rendered. You might for instance have a button component that you would like to be rendered as a hyperlink with an tag.

import styled from "styled-components";

const Button = styled.button`
  display: flex;
  align-content:center;
  justify-content:center;
  color: black;
  margin: 1em;
  padding: 0.25em 1em;
  width:10%;
  text-decoration:none;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const App = () => {
  return (
    <div>
    <Button as='a' href='#'>A HyperLink</Button>
  </div>
  );
};

export default App;

Output

scss-like syntax

styled-components uses stylis preprocessor which supports scss-like syntax. This provides support for advanced selector patterns, For example.

import styled from "styled-components";

const StyledCard = styled.div`
  border: 1px solid black;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 20%;
  > .name {
    font-size: 22px;
    color: black;
    transition: 0.5s;

    &:hover {
      color: red;
    }

    + .surname {
      color: #b30e16;
    }
  }
`;

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

const App = () => {
  return (
    <Container>
      <StyledCard>
        <h1 className="name">Antony</h1>
        <p className="surname">Ndungu</p>
      </StyledCard>
    </Container>
  );
};

export default App;

Animations

Styled components have keyframes that creates animation keyframes. The key frames are not specific to the component which means they can be exported anywhere within the app.

import styled, { keyframes } from "styled-components";

const rotate = keyframes`
from {
  transform: rotate(0deg);
}

to {
  transform: rotate(360deg);
}
`
const Rotate = styled.div`
  display:inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size:1.2rem
`

const App = () => {
  return (
    <Rotate>&lt; 💅🏾 &gt;</Rotate>
  );
};

export default App;

Conclusion

This tutorial covers most of the styled components features that you will need in your day to day development. Important to define styled component outside the render method. This is to ensure component is not recreated on every render pass. It also ensures caching is working correctly else the rendering speed will be slowed down.
In addition, not everything need to be styled component. There is a risk of over-engineering your application if you overuse the styled components.

Feel free to comment below should you need to discuss further.

Building a To-Do List App Using React - Hooks and Styled Component

Savannah TechStack — Sun, 05 Jun 2022 16:42:18 +0000

Introduction

Hooks were introduced in React 16.8. They allow use of state and other React features by using functional components. There are various types of hooks available in React for example useState, useEffect, useContext among others. For To-do List project we will only be using useState hook.
useState- allows adding of state to functional component.
Styled-component on the other hand is a popular library that is used to style react applications. It allows writing actual CSS in your JavaScript. You can find out more on All you need to know about styled-components with React.

If you would prefer to follow this tutorial on YouTube its available at the link below.

A complete working solution is available on Github

tndungu / TodoListApp

Todo List App using React Hooks and styled components.

Todo List App Using React and Styled Components

A TODO List React JS Project using React Hooks and Styled Components.

Local Setup

Clone the Repository using the following command: git clone https://github.com/tndungu/TodoListApp.git
Open the Repository using your favorite text editor. I use Visual Studio Code as a personal preference.
Open terminal and run the following: npm install
Run the project using npm start. This will open the project in http://localhost:3000

Video

There is a step by step guide on building the project on YouTube.

View on GitHub

To Do App

The To Do App that we are going to build will allow a user to add a task to a list of to-do items. Once the task is added, the user will be able to mark it as completed once its done. When you click on a task, if it was pending it will be marked as complete by crossing the task with a line. There will be a count that will be displaying both the pending and completed tasks.

Step by Step Guide

1. Create a React App

yarn:

yarn create react-app todo-list

npm:

npx create-react-app todo-list

cd into todo-list and yarn start OR npm start if using npm.

2. Design the UI

In the src folder, open App.js and get rid of everything between

tags. The App.js file should look as below:

import React from 'react';
import './App.css';

function App() {
 return (
   <div className="App">
        Hello World! Starting a to-do List
   </div>
 );
}

export default App;

We will use styled-components for styling our App. Using the following command install the styled-component package.

npm install styled-components

import the styled-components in our App.js by adding the following in import section.

import styled from "styled-components";

Our first component will be Container div with styling done using styled component. Our App will now look as follows.

import React from 'react';
import './App.css';
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
`;

function App() {
 return (
   <Container>
   </Container>
 );
}

export default App;

3. Complete the UI

Other components which includes input, button, span, div will be styled using styled-components and we will end up with the following for our UI definition. Our UI definition will be completed at this point.

import React from 'react';
import './App.css';
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
`;

const Button = styled.button`
  display:inline-block;
  flex: 1;
  border: none;
  background-color: teal;
  color: white;
  height: 30px;
  width: 50px;
  border-radius: 2px;
  cursor: pointer;
`;

const Text = styled.input`
  border: 2px solid #000;

`;

const TaskCount = styled.span`
  margin: 10px;
`;

const Tasks = styled.div`
`;

const TaskCount = styled.span`
  margin: 10px;
`;

const Tasks = styled.div`
`;

function App() {
 return (
  <Container>
      <div>
          <h2>Todo List</h2>
          <Text value={input} />
          <Button>Add</Button>
        <Tasks>
          <TaskCount>
            <b>Pending Tasks</b> 
          </TaskCount>
          <TaskCount>
            <b>Completed Tasks</b>
          </TaskCount>
        </Tasks>
        <div>
          <ul>
              /* List items consisting of tasks will be listed here */
          </ul>
        </div>
        <Button>Clear</Button>
      </div>
    </Container>
 );
}

export default App;

4. Add Tasks and Mark Completed tasks

At this point the UI is completed. We need to add functionality which will enable a user to add new tasks and mark completed tasks.

We will use useState() hook that will store the state. In our imports we add the following:

import React, { useState } from "react";

Using useState() hook, we will initialize the following states which will store state and manage changes to the variables.
input - variable to keep track of the task user inputs.
todoList - will consist of an array that will have a list of all tasks. Each task is defined as an object which looks as follows:

{
     id: id, //unique id
     task: Task, // a task to be added to the todo list
     complete: false, //false means task is incomplete, true means task is completed
 }

completedTaskCount - will keep track of count of completed tasks.

inside the App function in App.js, we will add the following:

const [input, setInput] = useState("");
const [todoList, setTodoList] = useState([]);
const [completedTaskCount, setCompletedTaskCount] = useState(0);

In the Text and Button components, we will add event handler functions setInput() and handleClick(). The setInput() will set value of user task input while handleClick() will add the task to todoList.

<Text value={input} onInput={(e) =>setInput(e.target.value)} />
<Button onClick={() => handleClick()}>Add</Button>

handleClick() function:

const handleClick = () => {
  const id = todoList.length + 1;
  setTodoList((prev) => [
    ...prev,
    {
      id: id,
      task: input,
      complete: false,
    },
  ]);
  setInput("");
};

5. Display List of tasks

Inside the ul tag we will define a map function that will iterate through the todoList [] array and create li list items for display. Each list item(task) will contain properties which includes: id, complete, onClick() event handler and task. It will look as follows:

<ul>
  {todoList.map((todo) => {
    return (
      <LIST
        complete={todo.complete}
        id={todo.id}
        onClick={() => handleComplete(todo.id)}
        style={{
          listStyle: "none",
          textDecoration: todo.complete && "line-through",
        }}
      >
        {todo.task}
      </LIST>
    );
  })}
</ul>;

The textDecorationstyle will conditionally apply a line-through for completed tasks and pending tasks will not have a line-through. On clicking the Add button, handleComplete(id) function will be called and it will do the following.

Modify the complete property of a task object to true or false depending on the previous state.
Increment/decrement the completedTaskCount variable depending if the complete property changed to true or false.

The function definition will be as follows:

const handleComplete = (id) => {
    let list = todoList.map((task) => {
      let item = {};
      if (task.id == id) {
        if (!task.complete){
            //Task is pending, modifying it to complete and increment the count
            setCompletedTaskCount(completedTaskCount + 1);
        } 
        else {
            //Task is complete, modifying it back to pending, decrement Complete count
            setCompletedTaskCount(completedTaskCount - 1);
        }

        item = { ...task, complete: !task.complete };
      } else item = { ...task };

      return item;
    });
    setTodoList(list);
  };

6. Final ToDo List
The final ToDo List code will look as below. Note that all along we have been modifying the App.js file only.

import { useState } from "react";
import styled from "styled-components";
import "./index.css";

const Container = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
`;

const Button = styled.button`
  display:inline-block;
  flex: 1;
  border: none;
  background-color: teal;
  color: white;
  height: 30px;
  width: 50px;
  border-radius: 2px;
  cursor: pointer;
`;

const Text = styled.input`
  border: 2px solid #000;
  width: 200px;
  padding: 5px;
  border-radius: 2px;
  margin: 5px;
`;

const TaskCount = styled.span`
  margin: 10px;
`;

const Tasks = styled.div`
`;

const LIST = styled.li`
    listStyle:"none";
    text-decoration: "line-through";
`;

const App = () => {
  const [input, setInput] = useState("");
  const [completedTaskCount, setCompletedTaskCount] = useState(0);
  const [todoList, setTodoList] = useState([]);

  const handleClick = () => {
    const id = todoList.length + 1;
    setTodoList((prev) => [
      ...prev,
      {
        id: id,
        task: input,
        complete: false,
      }
    ]);
    setInput("");
  };
  const handleComplete = (id) => {
    let list = todoList.map((task) => {
      let item = {};
      if (task.id == id) {
        if (!task.complete){
            //Task is pending, modifying it to complete and increment the count
            setCompletedTaskCount(completedTaskCount + 1);
        } 
        else {
            //Task is complete, modifying it back to pending, decrement Complete count
            setCompletedTaskCount(completedTaskCount - 1);
        }

        item = { ...task, complete: !task.complete };
      } else item = { ...task };

      return item;
    });
    setTodoList(list);
  };

  return (
    <Container>
      <div>
          <h2>Todo List</h2>
          <Text value={input} onInput={(e) =>setInput(e.target.value)} />
          <Button onClick={() => handleClick()}>Add</Button>
        <Tasks>
          <TaskCount>
            <b>Pending Tasks</b> {todoList.length - completedTaskCount}
          </TaskCount>
          <TaskCount>
            <b>Completed Tasks</b> {completedTaskCount}
          </TaskCount>
        </Tasks>
        <div>
          <ul>
            {todoList.map((todo) => {
              return (
                <LIST
                  complete = {todo.complete}
                  id={todo.id}
                  onClick={() => handleComplete(todo.id)}
                  style={{
                    listStyle: "none",
                    textDecoration: todo.complete && "line-through",
                  }}
                >
                  {todo.task}
                </LIST>
              );
            })}
          </ul>
        </div>
      </div>
    </Container>
  );
};

export default App;

Conclusion

Congratulations! You have now built a To do list App using React hooks and styled-components. You have also gone through other aspects of React and ES6 JavaScript. Its quite straight forward to develop. The above boilerplate can be used to extend the App to include more functionalities around the App. You can do the following if you would like to learn more.

Once task is completed, instead of strike-through you can make it to disappear.
Add a button below the list of tasks called "Clear" that when clicked it clears all the tasks.

Feel free to comment below incase you need further assistance.