@invisionag/iris-react-accordion
v3.6.2
Published
```js Accordion from '@invisionag/iris-react-accordion'; ```
Downloads
189
Maintainers
Keywords
Readme
Accordion from '@invisionag/iris-react-accordion';
Accordion
is a vertically collapsable box. It has a header that can be clicked to toggle between open and closed status. It can be used to group elements on a page that are not necessarily important enough to always be visible.
Usage:
<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
<div>I am an element in an accordion!</div>
</Drawer>
By default, accordions will be closed. To change this, pass the startOpen
prop
<Accordion startOpen header={<h1>Click me to toggle the accordion</h1>}>
<div>I am an element in an accordion!</div>
</Accordion>
Usually we can let the accordion control the state (open / closed). In certain cases, we may want to control this from the outside. You can pass open
to override the state
<Accordion open={true} header={<h1>Click me to toggle the accordion</h1>}>
<div>I am an element in an accordion!</div>
</Accordion>
Use the onToggle
handler to react to the accordion changing state
<Accordion onToggle={(open) => console.log('drawer open?', open)} header={<h1>Click me to toggle the accordion</h1>}>
<div>I am an element in an accordion!</div>
</Accordion>
Heading
To deal with the header, we have multiple options.
- Just pass
heading
. This can be a jsx template, numer or a string and will be static, independent of accordion state.
<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
<div>I am an element in an accordion!</div>
</Drawer>
- pass
headingOpen
andheadingClosed
. These will still be static, but switch depending on accordion state.
<Accordion
headingOpen={<h1>Click me to close the accordion</h1>}
headingClosed={<h1>Click me to open the accordion</h1>}
>
<div>I am an element in an accordion!</div>
</Drawer>
- pass
headerRenderer
. This needs to be a function that accepts two arguments,open
(boolean) andheading
(jsx).heading
will beheading
orheadingOpen
/headingClosed
, depending on what you passed.
<Accordion heading="my accordion" headerRenderer={(open, heading) => <h1>{open ? '-' : '+'}: {heading}</h1>}>
<div>I am an element in an accordion!</div>
</Accordion>