Build Multiple Level Selection With ReactJS Hooks

Fast Nguyen
Sep 20, 2020 Β· 3 min read

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 ? πŸ€”

Multiple level selection demo

So, let me show you how I build it with ReactJS.

Prerequisites

  1. Basic understanding of ReactJS.
  2. Used to use React Hooks
  3. Basic TypeScript type checking understanding
  4. Basic CSS
  5. Can code 😎 just kidding πŸ˜†

Project structure

./src
β”œβ”€β”€β”€components
β”‚ └───MultipleLevelSelection
│└──── index.tsx
│└──── styles.css
│└──── utils.ts
β”œβ”€β”€β”€hooks
│└─── useToggle.ts
└───types
│└─── global.d.ts
β”‚ App.test.tsx
β”‚ App.tsx
β”‚ index.css
β”‚ index.tsx
β”‚ logo.svg
β”‚ react-app-env.d.ts
β”‚ seeds.ts
β”‚ serviceWorker.ts
β”‚ setupTests.ts

Coding time

Multiple level selection types

The idea behind this component is very simple. At every single time, just show nested items of the current selected item until it has no more nested items.

If no item selected, show placeholder instead. Otherwise show its label got from getItemLabel method.

Multiple level selection component

Some custom useful hooks used to handle the logic.

😎 useToggle

This hook is used to handle state & handlers for toggling action.

I use it to handle actions open & close the drop-down selection.

hooks/useToggle.ts

😍 useSelect

This is the main hook to handle logic for the multiple level selection. It contains some main logic as below:

utils.ts

All logic contained in this hook are implemented one by one as below.

βœ… label

utils.ts

βœ… handleGetNestedItems

This callback used to get nested item of the selected $item at $level.

utils.ts

βœ… isSelectedItem

This callback to check if an $item at $level is selected.

utils.ts

βœ… handleClickItem

This callback is used to handle action click on an $item at $level.

utils.ts

πŸ˜‰ useClassNames

This hook is used to generate a generator mapping which returns className for every single className from defined $classes

utils.ts

Some styles from styles.css file support for this component.

Multiple level selection styles

After a couple of hours implementing this component, this is time to use it. ❀

Update App.tsx to getting started with new built component β€” Multiple level selection

App.tsx

βœ… App types

types/global.d.ts

βœ… App seeds

I add some fake generators to prepare demo data.

seeds.ts

βœ… App styles

App.css

Final result

My built component is just a simple idea to implement UI for nestable level items selection. So it may not have full features in your case. You can reference my example and build your own.

⏩ For full source code, you can reference to the below codesandbox or my GitHub

Multiple level selection

I am very appreciate because you are still reading on this last paragraph.
If you have any questions or comments about my article, do not hesitate to ask me out.

Thank you and see you on the next article 😊

Weekly Webtips

Explore the world of web technologies through a series of tutorials

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorialΒ Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Fast Nguyen

Written by

Software Engineer at Sendo.vn

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Fast Nguyen

Written by

Software Engineer at Sendo.vn

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer β€” welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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