react-robust-accordion

0.6.0 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i react-robust-accordion

Weekly Downloads

16

Version

0.6.0

License

MIT

Unpacked Size

19.5 kB

Total Files

8

Last publish

Collaborators

  • wwsalmon