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