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 ? 🤔
How does it work ? 🤔
So, let me show you how I build it with ReactJS.
- Basic understanding of ReactJS.
- Used to use React Hooks
- Basic TypeScript type checking understanding
- Basic CSS
- Can code 😎 just kidding 😆
Multiple level selection
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.
Some custom useful hooks used to handle the logic.
This hook is used to handle state & handlers for toggling action.
I use it to handle actions open & close the drop-down selection.
This is the main hook to handle logic for the multiple level selection. It contains some main logic as below:
All logic contained in this hook are implemented one by one as below.
This callback used to get nested item of the selected $item at $level.
This callback to check if an $item at $level is selected.
This callback is used to handle action click on an $item at $level.
This hook is used to generate a generator mapping which returns className for every single className from defined $classes
Some styles from styles.css file support for this component.
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 types
✅ App seeds
I add some fake generators to prepare demo data.
✅ App styles
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.
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 😊