ozgrozer / accordie

Custom React Accordion Component

Accordie

Custom React Accordion Component

Demo

Installation

Install with Yarn

$ yarn add accordie

or NPM

$ npm i accordie

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { Accordie, Panel } from 'accordie'

const App = () => {
  return (
    <Accordie>
      <Panel
        Heading={<div>Heading 1</div>}
        Content={<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>}
      />

      <Panel
        Heading={<div>Heading 2</div>}
        Content={<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>}
      />
    </Accordie>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Props

<Accordie>

If customStyle is true classNames overrides all the actual classes.

<Accordie
  customStyle
  classNames={{
    panel: 'panel',
    heading: 'heading',
    content: 'content',
    open: 'open',
    close: 'close'
  }}
>

<Panel>

Heading and Content props could be a String or a React Component.

<Panel
  Heading='Heading'
  Content={<div>Content</div>}
/>

Contribution

Feel free to contribute. Open a new issue, or make a pull request.

License

MIT