<Select> component made with ReactJS
npm install react-select3
This is written with ReactJS.
* Easy styling
* Easy control
* Easy fetching
Basic usage:
``javascript
import Select from 'react-select3'
import 'react-select3/dist/styles.css'
const selectOptions = [
{ id: 1, text: 'Uno' },
{ id: 2, text: 'Dos' },
{ id: 3, text: 'Tres' },
{ id: 4, text: 'Cuatro' },
]
`
Props:
| PropName | PropType | Description |
| ------------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------- |
| _allowClear_ | | whether to allow user to clear selected option _// Default: false_ |
| _cssClassNamePrefix_ | | you can provide custom prefix for Selects' classNames |
| _autoFocus_ | | whether to focus Select on mount |
| _closeOnClickOutside_ | | whether to close dropdown on click outside Select component _// Default: true_ |
| _defaultValue_ | / | provide id of the default selected option |
| _disabled_ | | disable selecting and reseting |
| _error_ | / | you can provide boolean to indicate Select's error or string to show error message |
| _layout_ |
`javascript`
const optionRenderer = option => (
fa fa-${icons[option.id]}} />
{option.text}
);
| PropName | PropType | Description |
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------ |
| _options_ | | array with options object. they must have next format: { id: |
| _onSelect_ | | callback on options select event. event object that passed into callback has next format: |
`javascript`
{
type: 'select',
isClear:
target: {
name:
option:
| PropName | PropType | Description |
| --------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| _placeholder_ | | shows up when there is no selected option |
| _search_ |
Select component has number of handy public methods that you can use by saving its ref, e.g.:
`javascript
class MyMajesticComponent extends React.Component {
_selectRef = node => {
this.select = node;
};
_resetSelect = () => {
this.select.clear();
};
render = () => {
return (
Methods:
| Method name | Method type | Description |
| ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _clear_ | | use it to clear selection programmaticaly |
| _options_ |
| sets options for Select component. Select.options = [/ new options /]. This setter is used by FetchSelect to set fetched options to Select component without rerendering it. |
| _options_ | | returns array of actual options from Selects' state Select.options // options array |
| _value_ | | returns id of currently selected option Select.value // selected option's id |$3
This component is a wrapper for Select component
that provides interface for fetching options from server by "termQuery"
on SearchInput change event, or once at component mount.
Usage:
`javascript
import { FetchSelect as Select } from 'react-select3'
import 'react-select3/dist/styles.css'// function that formats fetched objects into options
const responseDataFormatter = user => ({
// required keys
id: user._id,
text:
${user.first_name} ${user.last_name}, // Additional info that you can display in the options layout with "optionRenderer" function
phone: user.phone,
email: user.email,
})
// By default FetchSelect uses its own client that based on fetch,
// also you can provide your custom 'ajaxClient'
// e.g. endpoint: '/api/users/?filter=John&emailVerified=0'
const ajaxClient = (endpoint) => fetch(endpoint).then(data => data.users)
endpoint: '/api/users',
termQuery: 'filter',
responseDataFormatter,
ajaxClient,
params: { emailVerified: 0 }
}}
placeholder='Select user by typing his name'/>
`All ref interface methods and props except of
, search.status and search.minimumResults(if fetch.once = false)
are being proxied onto Select component.There are a number of FetchSelect specific props:
| PropName | PropType | Description |
| ---------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| _fetch_ |