https://github.com/mukeshsoni/react-togglegroup
Component to abstract toggling on/off states of group of items
https://github.com/mukeshsoni/react-togglegroup
react react-render-props reactjs reactjs-component toggle
Last synced: about 1 month ago
JSON representation
Component to abstract toggling on/off states of group of items
- Host: GitHub
- URL: https://github.com/mukeshsoni/react-togglegroup
- Owner: mukeshsoni
- Created: 2018-09-25T05:38:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-08T02:06:54.000Z (over 6 years ago)
- Last Synced: 2025-06-23T17:16:08.293Z (12 months ago)
- Topics: react, react-render-props, reactjs, reactjs-component, toggle
- Language: JavaScript
- Homepage: https://codesandbox.io/s/24mv09yp90
- Size: 464 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 (
{({ toggle, isOn }) => {
return items.map((item, index) => {
return (
toggle(index)}
{...item}
/>
);
});
}}
);
}
}
```
How to install `react-togglegroup`?
On your command line, type
```
npm install react-togglegroup --save
```
or, if you use yarn for installing dependencies, type
```
yarn add react-togglegroup
```
And in your react component -
```
import ToggleGroup from 'react-togglegroup'
// in your jsx somewhere
{({isOn, toggle}) => {
// your components
}}
```