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.

Examples and Docs

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.