diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md new file mode 100644 index 000000000..3222a1ed2 --- /dev/null +++ b/snippets/MultiselectCheckbox.md @@ -0,0 +1,85 @@ +### Multiple Checkbox + +## + +Renders a checkbox list with the options provided through `props`. + +Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. + +The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. + + +```jsx +export default class MultiCheckbox extends React.Component { + constructor(props) { + super(props); + this.style = { + listContainer: { + listStyle: 'none', + paddingLeft: 0, + }, + itemStyle: { + cursor: 'pointer', + padding: 5, + } + } + this.state = { + options: props.options, + } + } + + toggle = (item) => { + const { options } = this.state; + const { onChange } = this.props; + options.map((_, key) => { + if(options[key].label === item.label) { + options[key].checked = !item.checked; + } + }); + this.setState({ + options, + }, () => { + onChange(options); + }); + } + + render() { + const { options } = this.state; + return ( + + ) + } +} +``` +```jsx + +const options = [ + { label: 'Item One' }, + { label: 'Item Two' } +]; + +ReactDOM.render( + { + console.log(data); + }} + />, + document.getElementById('root')); +``` \ No newline at end of file