React components that provide multiple selection logic. Features mouse and keyboard selections. Can render arbitary tags as selectable items.
import React from 'react'; import MultiSelect, { Selectable } from '@chaosgroup/react-multi-select'; export default class SelectableParagraphs extends React.Component { constructor(props) { super(props); this.state = { selection: new Set }; this.onSelectionChange = this.onSelectionChange.bind(this); } onSelectionChange(selection) { this.state.selection !== selection && this.setState({ selection }); } render() { const { selection } = this.state; return ( <MultiSelect render="div" selection={selection} onSelectionChange={this.onSelectionChange} > { this.props.texts.map(p => ( <Selectable render="p" key={p} data={p}> {p}{selection.has(p) && ' <'} </Selectable> )) } </MultiSelect> ); } };