@comparaonline/ui-accordion

## Installation

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@comparaonline/ui-accordion
Minified + gzip package size for @comparaonline/ui-accordion in KB

Readme

@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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.