Package Exports

react-accessible-accordion

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-accessible-accordion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-accessible-accordion

Accessible Accordion component for React. Inspired by rc-collapse and react-sanfona. 🔍👌

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