REACT: react-select with Formik for Single and Multi Selections
Δημοσιεύθηκε 13/11/2022
First install the package: npm i react-select
react-select-> Costum Component file: MultiSelect.js
import Select from 'react-select';
const MultiSelect = ({
field,
form,
options,
isMulti = false,
placeholder = 'Select'
}) => {
function onChange(option) {
form.setFieldValue(
field.name,
option ? (option).map((item) => item.value) : [],
);
}
const getValue = () => {
if (options) {
return isMulti
? options.filter((option) => field.value.indexOf(option.value) >= 0)
: options.find((option) => option.value === field.value);
} else {
return isMulti ? [] : ('');
}
};
if (!isMulti) {
return (
<Select
options={options}
name={field.name}
value={options ? options.find(option => option.value === field.value) : ''}
onChange={(option) => form.setFieldValue(field.name, option.value)}
onBlur={field.onBlur}
placeholder={placeholder}
/>
)
} else {
return (
<Select
className="react-select-container"
classNamePrefix="react-select"
name={field.name}
value={getValue()}
onChange={onChange}
options={options}
isMulti={true}
placeholder={placeholder}
/>
)
}
}
export default MultiSelect;
usage Formik
for Single Selection
<Field
name="singleSelectCustom"
id="singleSelectCustom"
placeholder="Single Select"
isMulti={false}
component={MultiSelect}
options={[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
]}
/>
for Multi Selection
<Field
name="multiSelectCustom"
id="multiSelectCustom"
placeholder="Multi Select"
isMulti={true}
component={MultiSelect}
options={[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
]}
/>