react-robust-accordion v0.6.0

React Robust Accordion

A simple, robust accordion component for React. Made by Samson Zhang (GitHub, Twitter, website).

Installation

Install via npm:

npm i react-robust-accordion

Usage

Basic usage:

import Accordion from "react-robust-accordion"

...

<Accordion label={<div>Put what you want to show when collapsed here!</div>}>
    <div>Put what you want to show when expanded here!</div>
</Accordion>

Set whether the accordion is open or closed by default with the open prop:

<Accordion label={<div>This accordion will be open by default!</div>} open={true}>
    <div>Visitors will see what's here.</div>
</Accordion>

External control

react-robust-accordion can also be controlled externally with the use of props openState, setOpenState, and noClickLabel.

const [openState, setOpenState] = useState(false);

...

<button onClick={() => setOpenState(!openState)}>
    Click to toggle accordion
</button>

<Accordion
    label={<div>Put what you want to show when collapsed here!</div>}
    openState={openState}
    setOpenState={setOpenState}
    noClickLabel={true}
>
    <div>Put what you want to show when expanded here!</div>
</Accordion>

The noClickLabel param is always optional. When controlled with an external state variable, react-robust-accordion can still be expanded by clicking the label. noClickLabel is useful if you only want the accordion to be toggled with a single button rather than the entire label, for example.

Complete docs

Development

Clone this repo and run npm run start to start a webpack development server. demo/index.html with corresponding React code in demo.js will be spun up at localhost:8080 with hot reload.

Run npm run build to bundle the core component code in index.js into dist/bundle.js.