react-accessible-accordion

react-accessible-accordion

Accessible Accordion component for React. Inspired by rc-collapse and react-sanfona. :mag::ok_hand:

This is a work in progress. Feel free to contribute. Try a demo now.

Usage

First, grab the package from npm:

npm install --save react-accessible-accordion
# react-accessible-accordion's peerDependencies:
npm install --save react@^15.0.0 react-dom@^15.0.0

Then, import the editor and use it in your code. Here is a basic example:

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

import './node_modules/react-accessible-accordion/dist/react-accessible-accordion.css';

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>
                    Body content
                </p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>
                    Body content
                </p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

API

Accordion

props:

name	type	default	description
accordion	Boolean	true	Open only one item at a time or not
onChange	Function(keys)	noop	Triggered on change (open/close items)
className	String	accordion	CSS class(es) applied to the component

AccordionItem

props:

name	type	default	description
expanded	Boolean	false	Expands this item on first render
className	String	accordion__item	CSS class(es) applied to the component

AccordionItemTitle

props:

name	type	default	description
className	String	accordion__title	CSS class(es) applied to the component

AccordionItemBody

props:

name	type	default	description
className	String	accordion__body	CSS class(es) applied to the component
hideBodyClassName	String	accordion__body--hidden	Class name for hidden body state

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies.
npm install
# Install the git hooks.
./.githooks/deploy
# Set up a `.env` file with the appropriate secrets.
touch .env

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the the development tools in watch mode.
npm run start
# Runs linting.
npm run lint
# Runs tests.
npm run test
# View other available commands with:
npm run

Run the demo

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
npm run start-demo

Publish

git release vx.y.z
npm run dist
# Use irish-pub to check the package content. Install w/ npm install -g first.
irish-pub
npm publish

Changelog

[v0.3.0]

• No warnings when you have only one item in the accordion