Creating a lightweight checklist component in React
Part 1: Multi-select checkbox list
The reason for writing this, is that I couldn’t find a component that was simple enough and provided a small compiled file size. I started with Material UI List component, which is great, and the animations look good, but with all the additional components that you need to import to use it, the additional JavaScript file that was included was 1.5MB. I do use the Material UI components elsewhere but for this specific project I wanted to keep the file sizes to a minimum.
I have created this article as a walkthrough as I believe it helps to explain each stage, so that if you want to personalise it for yourself then you should understand how it all works, and therefore what to change. I could have provided it as a downloadable complete component, but I prefer to help people to understand.
Part 1 covers the creation of the initial component which takes in an array of items each with a value and text property, and returns an array of ids for the items which are checked. Part 2 will look at adding a “Select All” option to the list and the option of making it a single select component. We will also look at how to modify the App.js file to save the checked ids.
