Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 708 Commits
.github		.github
dist		dist
example		example
src		src
types		types
website		website
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.yaml		.prettierrc.yaml
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
package-lock.json		package-lock.json
package.json		package.json
rollup.config.mjs		rollup.config.mjs
tsconfig.json		tsconfig.json

Repository files navigation

React-Accordion

An unstyled, accessible accordion library for React apps and design systems.

Examples and Docs

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-accordion

or with Yarn

yarn add @szhsin/react-accordion

Usage

import{Accordion,AccordionItem}from'@szhsin/react-accordion';exportdefaultfunctionExample(){return(<Accordion><AccordionItemheader="What is Lorem Ipsum?">        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed        do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionItem><AccordionItemheader="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><AccordionItemheader="Why do we use it?">        Suspendisse massa risus, pretium id interdum in, dictum sit        amet ante. Fusce vulputate purus sed tempus feugiat.</AccordionItem></Accordion>);}