react-toggleable-context

React components to make anything to be toggleable

Demo

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 | | | | | |