Package Exports
- @szhsin/react-accordion
- @szhsin/react-accordion/dist/cjs/index.js
- @szhsin/react-accordion/dist/es/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@szhsin/react-accordion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React-Accordion
An unstyled, accessible accordion library for React apps and design systems.
Features
- Unstyled React accordion components
- Headless usage via React hooks
- WAI-ARIA compliant
- Fully keyboard accessible
- Supports animations
- Works in controlled and uncontrolled modes
- Control to expand/collapse individual or all items
- Compatible with React 18+ concurrent rendering
- Supports server-side rendering (SSR)
- Lightweight and tree-shakable (~3kB)
- Fully typed API with TypeScript
Install
with npm
npm install @szhsin/react-accordionor with Yarn
yarn add @szhsin/react-accordionUsage
import { Accordion, AccordionItem } from '@szhsin/react-accordion';
export default function Example() {
return (
<Accordion>
<AccordionItem header="What is Lorem Ipsum?">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AccordionItem>
<AccordionItem header="Where does it come from?">
Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
vitae, accumsan auctor mi.
</AccordionItem>
<AccordionItem header="Why do we use it?">
Suspendisse massa risus, pretium id interdum in, dictum sit
amet ante. Fusce vulputate purus sed tempus feugiat.
</AccordionItem>
</Accordion>
);
}Edit on CodeSandbox
Visit more examples and docs
License
MIT Licensed.