Git Product home page Git Product logo

react-multi-select-component's Introduction

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

react-multi-select-component's People

Contributors

dependabot-preview[bot] avatar harshzalavadiya avatar dependabot[bot] avatar ryzoo avatar kannndev avatar megakeegman avatar yuvalshim avatar porteron avatar jose-donato avatar cristianbote avatar chenjie-b1 avatar tefferson avatar maxnathaniel avatar mkhbragg avatar lucas-lm avatar bdokimakis avatar brijeshlakkad avatar breynolds-dev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.