@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>