js-helper-functions

ChecklistComponent

A customizable checklist component that supports grouped categories of items.

🛠 Tailwind CSS Setup

⚠️ This component library uses Tailwind CSS utility classes but does not include TailwindCSS by default.
You must have TailwindCSS configured in your own project for styles to apply correctly.

🛠 Tailwind Setup

To use this component library with Tailwind, add the following to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/tailwind-categorized-checklist/**/*.{js,jsx}",
  ],
  // other config...
};

Data Structure

The categoryList prop should follow a recursive Record<string, CategoryList | string[]> format, allowing unlimited levels of nesting.

Example:

const categoryList = {
  Home: {
    "Home Care Data": {
      "Property Data": ["Property Name", "Move in date", "Address"],
    },
    "Home Maintenance Data": {
      Bathroom: ["Install Bathtub", "Install Drainage"],
    },
  },
  "User Content": {
    Images: ["Portraits", "Animals"],
    Videos: ["Short-Form Videos", "Tutorials"],
  },
};

Category Type

type CategoryList = {
  [category: string]: CategoryList | string[];
};

Props

Prop Name	Type	Required	Default	Description
categoryList	Record<string, string[]>	✅	—	The nested structure of categories and items to render in the checklist.
onSelectionChange	(data: any) => void	❌	undefined	Callback fired when selected checklist items change.
showSelectedItemsList	boolean	❌	false	If true, displays a list of selected items separately.
showCountBadges	boolean	❌	false	If true, shows count badges next to categories indicating selection count.