@chaosgroup/react-multi-select

0.9.4 • Public • Published

react-multi-select

Build Status Coverage Status
NPM

React components that provide multiple selection logic. Features mouse and keyboard selections. Can render arbitary tags as selectable items.

quick example

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

Readme

Keywords

none

Package Sidebar

Install

npm i @chaosgroup/react-multi-select

Weekly Downloads

14

Version

0.9.4

License

MIT

Unpacked Size

788 kB

Total Files

19

Last publish

Collaborators

  • ickata
  • kon.simeonov