@dmitriig/react-select

React Select

A react dropdown multiselect component powered by react-virtualized for ability to display a long list of values

$3

``yarn add @dmitriig/react-select`


$3

// 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[]
}
`

$3

return onChange={(items)=>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