React Accordion

An unstyled, accessible accordion library for React apps and design systems
GitHub
188
Created 2 years ago, last commit 8 days ago
6 contributors
591 commits
Stars added on GitHub, month by month
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
+0.1
/day
Package on NPM
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

React-Accordion

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

Examples and Docs

NPM NPM

Features

  • Unstyled React accordion components
  • React hooks for Headless usage
  • WAI-ARIA compliant
  • Keyboard navigable
  • Support animation
  • Can be controlled or uncontrolled
  • Control to expand/collapse specific item or all items
  • Level 3 support of React 18 concurrent rendering
  • Support server-side rendering
  • Small and tree-shakable (~3kB)
  • Strongly typed API with TypeScript

react accordion

Install

with npm

npm install @szhsin/react-accordion

or with Yarn

yarn add @szhsin/react-accordion

Usage

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.