https://github.com/dmitriigaidarji/react-select
Simple multi selection dropdown for React
https://github.com/dmitriigaidarji/react-select
dropdown multiselectdropdown react react-virtualized typeahead-completions
Last synced: 12 months ago
JSON representation
Simple multi selection dropdown for React
- Host: GitHub
- URL: https://github.com/dmitriigaidarji/react-select
- Owner: dmitriigaidarji
- License: mit
- Created: 2019-08-23T03:04:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:58:44.000Z (about 3 years ago)
- Last Synced: 2025-01-24T09:33:15.199Z (about 1 year ago)
- Topics: dropdown, multiselectdropdown, react, react-virtualized, typeahead-completions
- Language: TypeScript
- Homepage: https://dmitriigaidarji.github.io/react-select/
- Size: 4.83 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Select
A react dropdown multiselect component powered by react-virtualized for ability to display a long list of values
### Installation
```yarn add @dmitriig/react-select```
### Props
```typescript
// Options should be provided as {value,label} pairs
export interface IItem {
value: number,
label: string
}
// Component props
export interface IReactSelectProps {
// possible options
options: IItem[],
// string placeholder
placeholder: string,
// callback on selection change
onChange: (items: IItem[]) => void,
// custom cell renderer
rowRenderer?: (item: any, index: number) => void,
// custom container style
style?: any,
// custom input style
inputStyle?: any,
// custom list dropdown style
listStyle?: any,
// custom list row height
listRowHeight?: number,
// custom input font size
inputFontSize?: number,
// custom message for no search results
noResultsMessage?: string
// controlled selection array
selection?: IItem[]
}
```
### Usage
##### Basic
```typescript
// Format data into value and label pair
const options = [];
for (let i = 0; i < 10000; i++) {
options.push({
value: i,
label: Math.random().toString(36).substring(7)
})
}
return console.log(items)}/>
```
Demo: https://codesandbox.io/embed/hopeful-jang-zzv8e?fontsize=14
##### Controlled
```javascript
function Controlled(props) {
const {options} = props;
// use an initial selection
const [selection] = React.useState(options.slice(0, index));
const [flag, setFlag] = React.useState(false);
// dynamically update the selection
function handleAdd() {
selection.push(options[index++]);
setFlag(!flag);
}
// dynamically update the selection
function handleRemove() {
selection.splice(0, 1);
setFlag(!flag);
}
return
Add a token
Remove a token
}
```