JSPM

react-multiple-select-dropdown-lite

1.1.0

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

Created 6 years ago
Published 5 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 Pure functional component for react using React-Hooks.

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
Disabled
Select Limit
Group
Searchable
Custom Creatable Value
Sublist
Themeable (using css var)

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
name	string	''	specify a name for form
disabled	bool	false	disable input
defaultValue	string \| array of object \| string array	''	specify default value
jsonValue	bool	false	get value from input as json
singleSelect	bool	false	allow one select only
downArrowIcon	string \| icon \| component	SVG	Specify custom down arrow icon
closeIcon	string \| icon \| component	SVG	Specify custom close 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
attr	object		set custom attr to element
customValue	bool	false	create custom options by pressing enter or comma (,)
largeData	bool	false	prevent slow down (DOM) for large amount of data