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