Skip to content

jb-san/react-toggleable-context

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5f689e4 · May 6, 2020

History

22 Commits
May 6, 2020
May 6, 2019
May 6, 2019
Nov 25, 2018
Nov 24, 2018
May 6, 2019
May 6, 2019
May 6, 2019
May 6, 2019
May 6, 2019
May 6, 2019
May 6, 2019
May 6, 2019

Repository files navigation

react-toggleable-context

React components to make anything to be toggleable cam be used to make a custom accordion, or.. anything really

it keeps track of a list of ids, that can then be used to toggle and collpase anything you can think of

Installation

npm i react-toggleable-context

yarn add react-toggleable-context

Usage

import ToggleGroup, { useToggleable } from 'react-toggleable-context';
function FirstComponent() {
    const { toggled, handleClick } = useToggleable('first');
    return (
        <div id={'first'}>
            <a id={'link'} onClick={handleClick}>
                Header
            </a>
            <div id={'section-body'} data-toggled={toggled ? 'true' : 'false'}>
                lorem
            </div>
        </div>
    );
}
function SecondComponent() {
    const { toggled, handleClick } = useToggleable('second');
    return (
        <div id={'second'}>
            <a id={'link'} onClick={handleClick}>
                Header
            </a>
            <div id={'section-body'} data-toggled={toggled ? 'true' : 'false'}>
                lorem
            </div>
        </div>
    );
}
function MyComponent(props) {
    return (
        <ToggleGroup>
            <FirstComponent />
            <SecondComponent />
        </ToggleGroup>
    );
}
import ToggleGroup from 'react-toggleable-context';

function MyComponent(props) {
    return (
        <ToggleGroup>
            <ToggleGroup.Section id={'first'}>
                {({ handleClick, toggled }) => (
                    <>
                        <a id={'link'} onClick={handleClick}>
                            Header
                        </a>
                        <div id={'section-body'} expanded={toggled ? 'true' : 'false'}>
                            lorem
                        </div>)
                    </>
                )}
            </ToggleGroup.Section>
            <ToggleGroup.Section id={'second'}>
                {({ handleClick, toggled }) => (
                    <>
                        <a id={'link'} onClick={handleClick}>
                            Header
                        </a>
                        <div id={'section-body'} expanded={toggled ? 'true' : 'false'}>
                            lorem
                        </div>)
                    </>
                )}
            </ToggleGroup.Section>
        </ToggleGroup>
    );
}

the ToggleGroup component provides the context and ToggleGroup.Section gives you the handleClick and toggled renderprops. The section must have an unique id inorder to be toggled.

ToggleGroup

Prop Type Description
collapse bool if set, all other expanded sections will collapse when another section is pressed
initialToggled array if given a list of ids those sections will have expanded true on initial render

ToggleGroup.Section

Prop Type Description required
id string must be unique true
children fn gives you 4 render props, handleClick, and toggled, the handleClick is bound to the section, handleOpen,handleClose true

About

React components to enable anything to be toggleable

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published