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
Param | Type | Description |
---|---|---|
props.children | reactNode |
Elements displayed in body of accordion (i.e. when expanded) |
props.label | reactNode |
Elements displayed in label of accordion (i.e. when collapsed) |
[props.openState] | boolean |
Optional custom state variable for external control |
[props.setOpenState] | function |
Optional custom setState function for external control (required if using props.openState) |
[props.noClickLabel] | boolean |
Optional flag to make clicking the label not expand the accordion. Useful if using external control |
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
.