JSPM

react-multiple-select-dropdown-lite

1.0.2

ESM via JSPM
ES Module Entrypoint
Export Map
Keywords
License
Repository URL
TypeScript Types
README

Created 6 years ago
Published 6 years ago
Downloads 1150
Score
MPQF
License MIT

React Multiple Select Light Weight Dropdown list | Searchable | Addable | Groupable etc

Package Exports

react-multiple-select-dropdown-lite

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-multiple-select-dropdown-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A lightweight Multiple/Single Select component for react using React-Hooks

Production minified 4.6 kb , gzipped 1.6 kb Bundlephobia

Screenshot

react-multiple-select-dropdown-menu

Install

npm i react-multiple-select-dropdown-lite

Basic Initialization

import React, { useState } from 'react'
import MultiSelect from  'react-multiple-select-dropdown-lite'
import  'react-multiple-select-dropdown-lite/dist/index.css'

const App = () => {

    const [value, setvalue] = useState('')

    const  handleOnchange  =  val  => {
        setvalue(val)
    }

    const  options  = [
        { label:  'Option 1', value:  'option_1'  },
        { label:  'Option 2', value:  'option_2'  },
        { label:  'Option 3', value:  'option_3'  },
        { label:  'Option 4', value:  'option_4'  },
    ]

    return(
        <div className="app">
            <div  className="preview-values">
                <h4>Values</h4>
                {value}
            </div>

        <MultiSelect
        onChange={handleOnchange}
        options={options}
        />

        </div>
)}
export  default App

Features and Roadmap

JSON Value
Clearable
Disable Chip
Custom Down Arrow Icon
Searchable
Disabled
Required
Group
Sublist
Select Limit
Custom Creatable Value

Props Options

Props	type	default	description
options	array	""	pass options as array of object `label` : (string) Options Label `value` : Option value `style` : (object) custom style `classes` : (string) style classes example: `[ { label : "Option 1", value : "opt_1", style: {textAlign: 'center'}, classes: "classA classB" } ]`
onChange	function		Return value on input change
width	int	300	Specify width in px
defaultValue	string \| array of object		specify default value
jsonValue	bool	false	get value from input as json
singleSelect	bool	false	allow one select only
downArrowIcon	string \| icon \| component	Icon	Specify custom down arrow icon
clearable	bool	true	show / hide close icon to clear value
downArrow	bool	true	show / hide down icon in dropdown
className	string \| object		specify custom class
placeholder	string	Select...	Input Placeholder
disableChip	bool	false	disable multiple select chips show value or total selected value only