react-select-2z
LIVE EXAMPLEDescription
-
React select2. Basic with multi choice. (Cutomize template option)
-
Apply
perfect-scrollbar
Usage
npm install react-select-2zImport 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
npm installnpm run dev
npm run startLicense
MIT
