react-multi-select

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>
		);
	}
};

Examples

1. selectable paragraphs
2. tree view