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