szhsin/react-accordion

The complete accordion solution for React

The list of things I created and love:

• 🍭 react-transition-state
• 🍔 react-menu
• 🎹 react-accordion
• 🚀 reactish-state
• 🔗 eslint-plugin-react-hooks-addons

react-accordion's Issues

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.

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.

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>

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

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.

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

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.

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

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 -

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.