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!


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.


  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


Quick enhance countdown demo

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

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

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

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