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 building React apps and design systems.

Examples and Docs

Features

Unstyled React accordion components
Headless UI React hooks
WAI-ARIA compliant
Keyborad navigable
Support animation
Can be controlled or uncontrolled
Tree-shakable and bundle size optimised
Support server-side rendering

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.