@comparaonline/ui-accordion
Installation
yarn add @comparaonline/ui-accordion
Usage
Accordion
import { Accordion } from '@comparaonline/ui-accordion';
The Accordion
is a component based on react-accessible-accordion
version 1
prop | required | type | description |
---|---|---|---|
activeItems |
false |
array |
list of numeric indexes. Each item represent an expanded accordion element |
onItemClick |
false |
function |
item click event handler. It receives index of the item clicked |
AccordionItem
import { AccordionItem } from '@comparaonline/ui-accordion';
AccordionItem
is a container for item head and body. When is active both inner head and body are active.
AccordionItemHead
import { AccordionItemHead } from '@comparaonline/ui-accordion';
AccordionItemHead
is an interactive component. Is active when AccordionItem parent is active. Executes accordion onItemClick if is clicked or keypressed.
prop | required | type | description |
---|---|---|---|
render |
true |
function |
renders component children. It receives active boolean state. |
AccordionItemBody
import { AccordionItemBody } from '@comparaonline/ui-accordion';
AccordionItemBody
is a container. Is active when AccordionItem parent is active.
prop | required | type | description |
---|---|---|---|
render |
true |
function |
renders component children. It receives active boolean state. |
Example
This accordion has two items. The item at index zero is expanded. The other items are collapsed.
<Accordion activeItems={[0]}>
<AccordionItem>
<AccordionItemHead
render={expanded => ...}
/>
<AccordionItemBody
render={expanded => ...}
/>
</AccordionItem>
<AccordionItem>
<AccordionItemHead
render={expanded => ...}
/>
<AccordionItemBody
render={expanded => ...}
/>
</AccordionItem>
</Accordion>