react-robust-accordion

    0.5.2 • 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.

    Keywords

    none

    Install

    npm i react-robust-accordion

    DownloadsWeekly Downloads

    20

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • wwsalmon