@comparaonline/ui-accordion

0.27.1 • Public • Published

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

screen shot 2018-04-05 at 6 26 54 pm

Readme

Keywords

none

Package Sidebar

Install

npm i @comparaonline/ui-accordion

Weekly Downloads

2

Version

0.27.1

License

MIT

Unpacked Size

27.3 kB

Total Files

10

Last publish

Collaborators

  • gnavarro
  • dsuarez_compa
  • pfariaz
  • ricardo.sosa
  • suarezcumare
  • fverag
  • comparaonline-dev
  • comparaonlineprivate
  • matotias
  • javierlara1989
  • smurua
  • eseceve
  • pablocompara