flex_accordion v1.0.0

React Flex Accordion

Demo available here: http://emilebres.github.io/react-flex-accordion/

Getting started

Install react-flex-accordion using npm.

npm install react-flex-accordion --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

import FlexAccordion from 'react-flex-accordion'

Alternately you can load a global-friendly UMD build:

<script src="path-to-react-flex-accordion/dist/umd/react-flex-accordion.js"></script>

Simple Example

FlexAccordion is a controlled component. You pass react-flex-accordion headers and panels as children. You pass the opened panels and an onChange function as props. Here's a simple example:

import React, { Component } from 'react'
import FlexAccordion from 'react-flex-accordion'

export default class FlexAccordionExample extends Component {

  constructor () {
    super()
    this.opened = {0: true}
    this.onChange = (id) => {
      this.opened = ({...this.opened, [id]: !this.opened[id]})
      this.forceUpdate()
    }
  }

  render () {
    return (
      <Accordion opened={this.opened} onChange={this.onChange} >
        <AccordionHeader id={0}>
          Header0
        </AccordionHeader>
        <AccordionPanel id={0}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </AccordionPanel>
        <AccordionHeader id={1}>
          Header1
        </AccordionHeader>
        <AccordionPanel id={1}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </AccordionPanel>
      </Accordion>
    )
  }
}

By default, FlexAccordion will span the whole height of its container but you can overwrite this behavior with inline style.

Flex Accordion Props

The children can take props as well.

For the Accordion headers:

For the Accordion panels: