react-togglegroup
v1.0.1
Published
Component to abstract toggling on/off states of group of items
Downloads
6
Maintainers
Readme
react-togglegroup
This component abstracts maintaining boolean state for a list of items. One can then implement various components on top of react-togglegroup
- like radiogroup, checkbox group, rich text editor toggles etc.
It's built as a render-prop component. The on/off state for each of the items can be asked using the isOn
function passed as argument to children
function prop.
Checkout some use cases here - https://codesandbox.io/s/24mv09yp90
E.g. This is how a Radiogroup can be implemented using react-togglegroup
class RadioGroup extends React.PureComponent {
render() {
const { items } = this.props;
// P.S. - Radio implementation not shown here
return (
<ToggleGroup>
{({ toggle, isOn }) => {
return items.map((item, index) => {
return (
<div>
<Radio
checked={isOn(index)}
onChange={() => toggle(index)}
{...item}
/>
</div>
);
});
}}
</ToggleGroup>
);
}
}