Build multiple level selection with ReactJS Hooks

Hi there! Long time no articles 😁. Today, I will show you how to build a multiple level selection from scratch in ReactJS with Hooks.

How does it look ? 🤔

Multiple level selection

How does it work ? 🤔


Photo by Ferenc Almasi on Unsplash

If you have been working on NodeJS projects for a while, I am pretty sure that you have ever seen “../../some/deep/import-path” syntax. I think these make you crazy with your code (or your partner 😅).

Can we refactor to make our codebase more prettier and clean? 🤔🧐
Absolutely YES! 😁

We have many ways to do it but there may have risks and difficulties for each way. (You can try yourself with some references at the end).

The way I mention in this article is using the jsconfig.json file and babel-cli.


Build OTP input from scratch with ReactJS Hooks

React OTP Input example

Hi, I come back after a long time no articles :)

Today, I show you how to create an OTP input with ReactJS from scratch. The target result is shown above.

Let’s go!

Summary

OTP Input is a common UI for every verification transaction step. It contains a number of inputs to fill out the OTP/Verification code sent. One character per input. In this article, I use ReactJS and hooks to implement OTP Input from scratch.

Prerequisites

  1. Basic understanding of ReactJS.
  2. Used to use React Hooks
  3. Basic TypeScript type checking understanding
  4. Can code :)…


Hello you guys, it’s me Fast Nguyen. Today, I give you a basic idea to enhance Countdown Component in React with Typescript.

The pattern I use in this Component is render-props you can check it first to understand clearly what I wrote.

You can find full source code from my GitHub.

Photo by Niklas Kickl on Unsplash

Demo:

Quick enhance countdown demo

To be quick, we go-ahead to the snipped code.

EnhanceCountDown.tsx
class EnhanceCountDown extends React.PureComponent<  EnhanceCountDownPropsType,  EnhanceCountDownStateType>

Create the class EnhanceCountDown Component extends from

React.PureComponent<PropTypes, StateTypes>

Define countDownInterval property.

countDownInterval?: number;

State structure :

  • timeout the current countDown value with the initial value taken from…


I’m Fast Nguyen ( aka Phat Nguyen) graduated from Viet Nam National Ho Chi Minh University, University of Information Technology(UIT). Currently, I am working as a Software Engineer at Sendo.vn.

Fast Nguyen
Fast Nguyen

I am focusing on ReactJS, TypeScript and some related libraries, I started to say: “Hello World!” in Feb 2017. I love coding with ReactJS because it has a special approach to web development by building components and combine together like a lego game. Instead of using server-side rendering, ReactJS uses client-side rendering as default.

I have been building some side-projects from simple to advanced combined with several useful Javascript libraries like ReactJS, Redux, React Router, Redux Persist, Material-UI, Ant-design, ….You can refer it in My Projects.

I also write some technical articles on Medium in my free time, you can refer to them in My Articles.

Fast Nguyen

Software Engineer at Sendo.vn

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store