react-select

Basic Single Select

This feature allows you to create a basic single selection dropdown where a user can select one option from a predefined list.

{"import Select from 'react-select';\n\nconst options = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' }\n];\n\nconst MyComponent = () => (\n  <Select options={options} />\n);"}

Multi-Select

This feature enables users to select multiple options from the dropdown. It is useful for fields that require more than one selection.

{"import Select from 'react-select';\n\nconst options = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' }\n];\n\nconst MyComponent = () => (\n  <Select isMulti options={options} />\n);"}

Asynchronous Loading

This feature allows for loading options asynchronously, which is useful when the options are not available at initial render time or need to be fetched based on user input.

{"import Select from 'react-select';\nimport AsyncSelect from 'react-select/async';\n\nconst loadOptions = (inputValue, callback) => {\n  setTimeout(() => {\n    callback(filterOptions(inputValue));\n  }, 1000);\n};\n\nconst MyComponent = () => (\n  <AsyncSelect loadOptions={loadOptions} />\n);"}

Creatable Select

This feature allows users to create a new option on the fly if the option they are looking for is not available in the list.

{"import CreatableSelect from 'react-select/creatable';\n\nconst options = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' }\n];\n\nconst MyComponent = () => (\n  <CreatableSelect isMulti options={options} />\n);"}