https://github.com/srph/react-accordion
Build markup-agnostic accordions
https://github.com/srph/react-accordion
accordion library react
Last synced: 3 months ago
JSON representation
Build markup-agnostic accordions
- Host: GitHub
- URL: https://github.com/srph/react-accordion
- Owner: srph
- Created: 2017-12-02T05:24:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T02:38:54.000Z (over 8 years ago)
- Last Synced: 2025-09-11T14:55:39.998Z (10 months ago)
- Topics: accordion, library, react
- Language: JavaScript
- Homepage: http://xenodochial-beaver-320a9d.netlify.com
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Accordion [](https://npmjs.com/packages/@srph/react-accordion) [](https://travis-ci.org/srph/react-accordion?branch=master)
Build markup-agnostic accordions
View [demo](http://xenodochial-beaver-320a9d.netlify.com). View [examples](storybook/accordion.js).
## 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
```bash
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.
```html
```
This library is exposed as `ReactAccordion` (e.g., `ReactAccordion`, `ReactAccordion.AccordionButton`, `ReactAccordion.AccordionPane`).
## Usage
View [examples](storybook/accordion.js).
```js
import React from 'react';
import Accordion, {AccordionPane, AccordionButton} from '@srph/react-accordion';
class App extends React.Component {
render() {
return (
What does X mean?
{(open) => {
return open ? '▼' : '▲';
}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
What does X mean?
{(open) => {
return open ? '▼' : '▲';
}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
);
}
}
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](http://xenodochial-beaver-320a9d.netlify.com), or build it yourself locally:
```bash
npm install
npm run start
```
Afterwards, open up `localhost:9001` in your browser.
### Bundling package
```
npm run bundle
```
### Publish storybook
```
npm run storybook:publish
```