All Projects → hc-oss → react-multi-select-component

hc-oss / react-multi-select-component

Licence: MIT license
Lightweight (~5KB gzipped) multiple selection dropdown component

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to react-multi-select-component

Angular2 Multiselect Dropdown
Angular 2 Dropdown Multiselect
Stars: ✭ 225 (-19.35%)
Mutual labels:  select, multiselect, dropdown
Downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Stars: ✭ 10,183 (+3549.82%)
Mutual labels:  select, multiselect, dropdown
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (-67.03%)
Mutual labels:  select, multiselect, dropdown
insect
🛠 Highly customisable, minimalistic input x select field for React.
Stars: ✭ 33 (-88.17%)
Mutual labels:  select, dropdown, react-select
Nb Choices
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
Stars: ✭ 32 (-88.53%)
Mutual labels:  select, multiselect, dropdown
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (-67.38%)
Mutual labels:  select, multiselect, dropdown
Ng Select
⭐ Native angular select component
Stars: ✭ 2,781 (+896.77%)
Mutual labels:  select, multiselect, dropdown
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-60.22%)
Mutual labels:  select, multiselect
React Select Me
Fast 🐆. Lightweight 🐜. Configurable 🐙. Easy to use 🦄. Give it a shot 👉🏼
Stars: ✭ 119 (-57.35%)
Mutual labels:  select, dropdown
multiselect
Angular Multiselect
Stars: ✭ 29 (-89.61%)
Mutual labels:  multiselect, dropdown
React Dropdown Select
Customisable dropdown select for react
Stars: ✭ 227 (-18.64%)
Mutual labels:  select, dropdown
React Responsive Select
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
Stars: ✭ 98 (-64.87%)
Mutual labels:  select, dropdown
Vue Treeselect
A multi-select component with nested options support for Vue.js
Stars: ✭ 2,347 (+741.22%)
Mutual labels:  select, dropdown
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (-17.56%)
Mutual labels:  select, dropdown
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (-35.84%)
Mutual labels:  select, dropdown
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+3284.23%)
Mutual labels:  select, dropdown
vue-tags-component
Vue.js 2+ tags component
Stars: ✭ 27 (-90.32%)
Mutual labels:  select, dropdown
react-picky
Yet another React multiselect. With checkbox support instead of tags.
Stars: ✭ 78 (-72.04%)
Mutual labels:  multiselect, dropdown
tagselector
Dependency-free JS library that turns select fields in customizable tag clouds
Stars: ✭ 19 (-93.19%)
Mutual labels:  select, dropdown
Pretty Dropdowns
A simple, lightweight jQuery plugin to create stylized drop-down menus.
Stars: ✭ 96 (-65.59%)
Mutual labels:  select, dropdown

react-multi-select-component

Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

Storybook GitHub Actions Status NPM gzip

Features

  • 🕶 Zero Dependency
  • 🍃 Lightweight (<5KB)
  • 💅 Themeable
  • Written w/ TypeScript

🔧 Installation

npm i react-multi-select-component    # npm
yarn add react-multi-select-component # yarn

📦 Example

Example

import React, { useState } from "react";
import { MultiSelect } from "react-multi-select-component";

const options = [
  { label: "Grapes 🍇", value: "grapes" },
  { label: "Mango 🥭", value: "mango" },
  { label: "Strawberry 🍓", value: "strawberry", disabled: true },
];

const Example = () => {
  const [selected, setSelected] = useState([]);

  return (
    <div>
      <h1>Select Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy="Select"
      />
    </div>
  );
};

export default Example;

More examples can be found here

👀 Props

Prop Description Type Default
labelledBy value for aria-labelledby string
options options for dropdown [{label, value, disabled}]
value pre-selected rows [{label, value}] []
hasSelectAll toggle 'Select All' option boolean true
isLoading show spinner on select boolean false
shouldToggleOnHover toggle dropdown on hover option boolean false
overrideStrings localization object
onChange onChange callback function
disabled disable dropdown boolean false
disableSearch hide search textbox boolean false
filterOptions custom filter options (async supported) function Fuzzy Search
className class name for parent component string multi-select
valueRenderer custom dropdown header function
ItemRenderer custom dropdown option function
ClearIcon Custom Clear Icon for Search ReactNode
ArrowRenderer Custom Arrow Icon for Dropdown ReactNode
debounceDuration debounce duration for Search number 300
ClearSelectedIcon Custom Clear Icon for Selected Items (Hint: Pass null to prevent it from rendering completely) ReactNode
isCreatable Allows user to create unavailable option(s) example boolean false
onCreateOption allows to override newly created option example function
closeOnChangedValue automatically closes dropdown when its value is changed boolean false

📝 Changelog

For every release changelog/migration-guide will be available in releases

🤠 Credits

📜 License

MIT © harshzalavadiya

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].