szhsin / react-accordion

The complete accordion solution for React

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

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.

react-accordion's Issues

can't modify the header

I want absolute control of everything. I can't access the h3 and button elements in the header component. It's necessary for me.

Automatically Scroll to Content when opened on mobile

Hi, is there a way to have it automatically scroll to the top of content when an accordion is open on mobile. currently the user has to scroll back up tot see the opened accordion. this is similar to the issue explained here with gif - oblador/react-native-collapsible#86

Or Another possible solution is to not have the previously opened accordion not collapse when new one is opened. (on mobile) so that there is no shift in where the accordion gets opened.

Console warning: export 'useId' was not found in 'react'

Webpack is printing this warning in the console -
WARNING in ./node_modules/@szhsin/react-accordion/dist/es/hooks/useId.js 10:15-20
export 'useId' (imported as 'useId') was not found in 'react'

Screenshot here -

The examples in the site do not match what we see when using the lib

The example in the site have a nice animation. That was the only reason I was looking into this lib, because animating heights is very hard. How are the animations in the example implemented? When I used the lib, there were no aminations at all.

Feature Idea: Preset Accordion Styling

Hi! I love this package! It makes setting up high quality accordions super convenient. One suggestion is it would be great to get some preset styling so that we don't have to write our own styling before pushing code to production.

Is it possible to toggle accordion only on click on arrow icon?

Hi there,

I hope you are doing well, first of all thanks for the package. I have a bit different scenario for my use case. What I want to achieve is that I only want to open accordion on click on arrow icon. I will really appreciate it if you please guide on how to do this.

Regards,

Shehzad Asif
Front-end Developer

Chevron not appearing

The chevron isn't loading in (not found in inspector) when installed using yarn add @szhsin/react-accordion. Otherwise, the accordion is working as expected.

<Accordion allowMultiple>
  <AccordionItem header={<li></li>}>
    <div class="content"></div>
  </AccordionItem>
</Accordion>

Multiple Accordion Triggers?

Hi there, thanks for the library! I was wondering if there was a way to have multiple accordion triggers besides the header. So something like a button below an accordion that would open up the accordion too. To build something like:

Any ideas how this would be possible, would be greatly appreciated.

Animation doesn't work with useAccordionProvider

I'm using the ControlledAccordion version and I set the transition values via useAccordionProvider but it doesn't seem to work.

Here is a simple example https://codesandbox.io/s/amazing-joliot-d4bkzb

Accordion header: I want to change the chevron position when opening an accordion item

By default, the chevron icon is on the top right corner of an accordion item. Now I want to move it to the bottom right of the accordion item when opening the accordion item. I can't find any solution. Please help

Import of useId breaks when using React version < 18

useId was introduced in React version 18, so when you use an earlier version of React the import in src/hooks/useId.ts breaks. I forked this repo and created my own solution, see GiordanoArman@d1e249d. But it would be nice to include this fix in this repo.