🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

tailwind-dynamic-accordion

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-dynamic-accordion

`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

1.0.8
latest
Version published
Weekly downloads
12
-25%
Maintainers
1
Weekly downloads
 
Created

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

NameTypeDescription
dataDynamicDataThe nested data structure for categories and items.
activeTab{ id: string; label: string }Currently active tab identifier and label.
selectedItemsDynamicDataCurrently selected items, structured similarly to categoryList.
handleCheckboxChange(path: string[], item: string) => voidCallback invoked when a checkbox is toggled.
activeAccordionIdstringThe identifier of the currently open accordion section.
setActiveAccordionId(id: string, e: MouseEvent<HTMLButtonElement>) => voidCallback for setting the open accordion section.
leftPanelState{ activeLabel: string \ null }Used to filter subcategories by an active label.
showCountBadgesboolean (optional)Whether to show badges for selected item counts. Default is false.
searchTermstring (optional)Optional search term for highlighting matches.
type"checkbox" (optional)Currently only supports "checkbox".

FAQs

Package last updated on 22 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts