react-awesome-accordion v1.0.2

react-awesome-accordion

An easy and quick way to create accordions

Install

npm install --save react-awesome-accordion

Usage

import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from 'react-awesome-accordion'
import 'react-awesome-accordion/dist/index.css'

  <Accordion>
      <AccordionItem>
        <AccordionHeader>
          <div>
            <h4>accordion one</h4>
            <p>test</p>
          </div>
        </AccordionHeader>
        <AccordionContent>
          <p>accordion content</p>
        </AccordionContent>
      </AccordionItem>

      <AccordionItem>
        <AccordionHeader>
          <h3>accordion two</h3>
        </AccordionHeader>
        <AccordionContent>
          <p>accordion content</p>
          <p>accordion content</p>
          <p>accordion content</p>
          <p>accordion content</p>
        </AccordionContent>
      </AccordionItem>
    </Accordion>

Styles

A few styles has been provided to help you start and running but I strongly encourage you to write your own styles for your accordions.

Components API

Accordion:

allowMultipleOpen : boolean optional, default: false

openByDefault: number[] optional

customIconType: HTMLElement optional, default: svg

AccordionHeader:

This is used as the accordion toggle. It can receive as many HTMLElement as you want. An icon is going to be added automatically as the last element.

License

MIT © romainwidmer