react-toggleable-context
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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

    Install

    npm i react-toggleable-context

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    41 kB

    Total Files

    18

    Last publish

    Collaborators

    • jonathan-san