react-select-2z

react-select-2z

LIVE EXAMPLE

Description

• React select2. Basic with multi choice. (Cutomize template option)

• Apply perfect-scrollbar

Usage

npm install react-select-2z

Import the module in the place you want to use:

// import main.js
import 'select2/dist/js/select2.min.js'
import 'select2/dist/css/select2.min.css'
import 'perfect-scrollbar/css/perfect-scrollbar.css'

// import you component
import ReactSelect2 from 'react-select-2z'
import 'react-select-2z/build/styles.css'

Snippet

    <ReactSelect2
        multiple={true}
        selectedValues={selected}
        options={state}
        // templateOption={templateOption} // customize template (option) (html)
        // templateDisplay={templateDisplay} // customize selected values (html)
        // customCheckSelect={customCheckSelect} // customize check selected
        // customFilterData={customFilterData} // customize check search
        keyLabel='title'
        keyValue='id' // when options = [1, 2, 3, 4...]  (no need keyValue & keyLabel)
        placeholder='Select item'
        // disabled
      />

props

Some main select2 advance checking...

props	type	description
id
options = []
selectedValues = []
onChange
className
required = false
disabled = false
multiple = false
optionClassName
selectedClassName
maximumSelectionLength	number	Need update > 0. Default nolimit
keyLabel		list object (key for selected)
keyValue		list object (label for selected)
closeOnSelect	boolean	Default. (False)
placeholder
noFoundData	func	set text when search no data
noOptionData	func	set text when no option
onHidden	func
select2Config = {}
templateOption
templateDisplay
customCheckSelect	func
customFilterData	func

Something checking! (idea, v.v..)

RUN

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT