https://github.com/chaosgroup/react-multi-select

https://github.com/chaosgroup/react-multi-select

multi-select react react-component react-typescript

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/chaosgroup/react-multi-select
• Owner: ChaosGroup
• License: mit
• Created: 2019-06-26T09:28:42.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:34:38.000Z (over 3 years ago)
• Last Synced: 2025-02-22T19:37:57.453Z (about 1 year ago)
• Topics: multi-select, react, react-component, react-typescript
• Language: TypeScript
• Size: 3.81 MB
• Stars: 1
• Watchers: 5
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-multi-select

[![Build Status](https://travis-ci.org/ChaosGroup/react-multi-select.svg?branch=master)](https://travis-ci.org/ChaosGroup/react-multi-select)

[![Coverage Status](https://coveralls.io/repos/github/ChaosGroup/react-multi-select/badge.svg?branch=master)](https://coveralls.io/github/ChaosGroup/react-multi-select?branch=master)




[![NPM](https://nodei.co/npm/@chaosgroup/react-multi-select.png)](https://npmjs.org/package/@chaosgroup/react-multi-select)

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

![quick example](./examples.gif)

```js

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 (

			

				{

					this.props.texts.map(p => (

						

							{p}{selection.has(p) && ' <'}

						

					))

				}

			

		);

	}

};

```

### Examples

1. [selectable paragraphs](./examples/stories/paragraphs/index.jsx)

2. [tree view](./examples/stories/nested-lists/index.jsx)