tailwind-dynamic-accordion

DynamicAccordion Component

DynamicAccordion is a reusable and flexible React component that renders a hierarchical, collapsible, and optionally filterable list of checkboxes, input or html data. It supports dynamic nested data structures and displays counts of selected items with customizable UI.

🛠 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.

✨ Features

Recursively renders multi-level accordion panels
Supports checkbox selections
Highlights matches for search terms
Displays selected item count badges
Customizable for dark/light modes
Efficient rendering using React.memo and useCallback

🛠 Tailwind Setup

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

module.exports = {
  content: ["...", "./node_modules/tailwind-dynamic-accordion/**/*.{js,jsx}"],
  // other config...
};

Data Structure

The tabs prop should follow a recursive { id: string; label: string }[] format, allowing unlimited levels of nesting.

Example:

const data = {
  Fruits: {
    Citrus: ["Orange", "Lemon"],
    Berries: ["Strawberry", "Blueberry"],
  },
};

if using checkbox or radio as content on accordion

const selectedItems = {
  Fruits: {
    Citrus: ["Lemon"],
  },
};

🛠 Dependencies

js-helper-functions react-icons

Props

Name	Type	Description
`data`	`DynamicData`	The nested data structure for categories and items.
`activeTab`	`{ id: string; label: string }`	Currently active tab identifier and label.
`selectedItems`	`DynamicData`	Currently selected items, structured similarly to `categoryList`.
`handleCheckboxChange`	`(path: string[], item: string) => void`	Callback invoked when a checkbox is toggled.
`activeAccordionId`	`string`	The identifier of the currently open accordion section.
`setActiveAccordionId`	`(id: string, e: MouseEvent<HTMLButtonElement>) => void`	Callback for setting the open accordion section.
`leftPanelState`	`{ activeLabel: string \ null }`	Used to filter subcategories by an active label.
`showCountBadges`	`boolean` (optional)	Whether to show badges for selected item counts. Default is `false`.
`searchTerm`	`string` (optional)	Optional search term for highlighting matches.
`type`	`"checkbox"` (optional)	Currently only supports `"checkbox"`.