{"library":"react-accessible-accordion","title":"React Accessible Accordion","description":"react-accessible-accordion is a React component library providing a WAI-ARIA compliant accordion interface. The current stable version is 5.0.1. While it provides robust accessibility features for accordions, the project is officially no longer maintained, with the developers strongly recommending the use of native HTML `<details>` and `<summary>` elements for new implementations due to their superior performance, framework-agnostic nature, and built-in accessibility. Releases have been infrequent, primarily addressing bug fixes or adapting to new React versions, rather than active feature development. Key differentiators historically included its out-of-the-box WAI-ARIA compliance and a component-based API for building accordions within React applications, but these are now largely superseded by native browser capabilities. It ships with TypeScript types for improved developer experience.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-accessible-accordion"],"cli":null},"imports":["import { Accordion } from 'react-accessible-accordion';","import { AccordionItem } from 'react-accessible-accordion';","import 'react-accessible-accordion/dist/fancy-example.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport {\n    Accordion,\n    AccordionItem,\n    AccordionItemHeading,\n    AccordionItemButton,\n    AccordionItemPanel,\n} from 'react-accessible-accordion';\n\n// Optional: Import demo styles, or create your own.\nimport 'react-accessible-accordion/dist/fancy-example.css';\n\nexport default function BasicAccordionExample() {\n    // Configure accordion behavior with props like allowMultipleExpanded and allowZeroExpanded\n    return (\n        <Accordion allowZeroExpanded>\n            <AccordionItem uuid=\"item-1\">\n                <AccordionItemHeading>\n                    <AccordionItemButton>\n                        What is React?\n                    </AccordionItemButton>\n                </AccordionItemHeading>\n                <AccordionItemPanel>\n                    <p>\n                        React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.\n                    </p>\n                </AccordionItemPanel>\n            </AccordionItem>\n            <AccordionItem uuid=\"item-2\">\n                <AccordionItemHeading>\n                    <AccordionItemButton>\n                        Why use an accessible accordion?\n                    </AccordionItemButton>\n                </AccordionItemHeading>\n                <AccordionItemPanel>\n                    <p>\n                        Accessible accordions ensure that all users, including those using assistive technologies, can easily navigate and interact with collapsed and expanded content.\n                    </p>\n                </AccordionItemPanel>\n            </AccordionItem>\n        </Accordion>\n    );\n}","lang":"typescript","description":"Demonstrates a basic accessible accordion with two expandable items, using named imports for components and an optional demo stylesheet. It also explicitly shows `uuid` for consistent IDs, although often automatically generated.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}