React Accordion

Build markup-agnostic accordions

View demo. View examples.

Why?

Most projects work fine. In addition, accordions are pretty simple in nature. However, this library was built for simplicity:

• It doesn't assume markup.
• It only handles state.
• It provides the bare minimum to get you started.

How It Works

This library takes advantage of context to pass down data to the each pane.

Installation

npm install @srph/react-accordion --save

Script tags

If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.

<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-accordion/dist/react-accordion.min.js"></script>

This library is exposed as ReactAccordion (e.g., ReactAccordion, ReactAccordion.AccordionButton, ReactAccordion.AccordionPane).

Usage

View examples.

import React from 'react';
import Accordion, {AccordionPane, AccordionButton} from '@srph/react-accordion';

class App extends React.Component {
  render() {
    return (
    <Accordion paneClassName="panel" openClassName="-open">
      <AccordionPane>
        <div className="heading">
          <h4 className="title">What does X mean?</h4>

          <AccordionButton className="button">
            {(open) => {
              return open ? '▼' : '▲';
            }}
          </AccordionButton>
        </div>

        <div className="body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </AccordionPane>

      <AccordionPane>
        <div className="heading">
          <h4 className="title">What does X mean?</h4>

          <AccordionButton className="button">
            {(open) => {
              return open ? '▼' : '▲';
            }}
          </AccordionButton>
        </div>

        <div className="body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </AccordionPane>
    </Accordion>
    );
  }
}

export default App;

API Documentation

Here's a list of props you may use to customize the component for your use-case:

Accordion

All other props are passed down to the div root element as usual.

Prop	Type	Description
paneClassName	string (required)	The classname to pass all AccordionPane.
openClassName	string	The classname to pass to the active AccordionPane. Defaults to active.
defaultActive	number	Default open accordion. Defaults to 0.
component	string|ReactElement	Component / element to use to wrap provided children. Defaults to div

NOTE: Accordion wraps your provided children inside a div. To customize this, see the component prop.

AccordionPane

All other props are passed down to the div root element as usual.

NOTE: AccordionPane ignores className.

AccordionButton

All other props are passed down to the button root element as usual.

NOTE: AccordionButton ignores onClick and type.

Setup

You can check the demo, or build it yourself locally:

npm install
npm run start

Afterwards, open up localhost:9001 in your browser.

Bundling package

npm run bundle

Publish storybook

npm run storybook:publish