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'; { const toggled handleClick = ; return <div => <a = => Header </a> <div = => lorem </div> </div> ;} { const toggled handleClick = ; return <div => <a = => Header </a> <div = => lorem </div> </div> ;} { return <ToggleGroup> <FirstComponent /> <SecondComponent /> </ToggleGroup> ;}
import ToggleGroup from 'react-toggleable-context'; { return <ToggleGroup> <ToggleGroup.Section => handleClick toggled <> <a = => Header </a> <div = => lorem </div> </> ) </ToggleGroup.Section> <ToggleGroup.Section => handleClick toggled <> <a = => Header </a> <div = => 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 |