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.
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]'));
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 |
name | type | default | description |
---|---|---|---|
expanded | Boolean | false | Expands this item on first render |
className | String | accordion__item | CSS class(es) applied to the component |
name | type | default | description |
---|---|---|---|
className | String | accordion__title | CSS class(es) applied to the component |
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 |
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
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
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
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