Dynamic React Select

A react application

Usage

To use the dynamic-react-select component, follow these steps:

1. Install the package using npm or yarn: npm:

   npm install dynamic-react-select

   yarn:

   yarn add dynamic-react-select

   pnpm:

   pnpm add dynamic-react-select

2. Import the component in your project:

   import DynamicReactSelect from 'dynamic-react-select'

3. Use the component in your code:

   const options = [
     { value: 'option1', label: 'Option 1' },
     { value: 'option2', label: 'Option 2' },
     { value: 'option3', label: 'Option 3' },
   ]
   
   const MyComponent = () => {
     return (
       <div>
         <h1>My Component</h1>
         <DynamicReactSelect name='field-name' options={options} />
       </div>
     )
   }
   
   export default MyComponent

4. Customize the component by passing props as needed.

That's it! You can now use the DynamicReactSelect component in your project. Feel free to explore the available props and customize it according to your requirements.

Props

Prop Name	Default	Required	Description
options	Empty Array[] {value: string, label: string}>	true	List of elements to rendering
value	null	false	Item of the list {value: string, label: string} or null
name	undefined	true	Field name
onChange	undefined	false	Triggered function when is item from the list is selected
onInputChange	undefined	false	Triggered function when the input for search changes
isSearchable	false	false	Flag to show or not the search input field
isLoading	false	false	Flag to display a status loading with loadingLabel prop
clearValueOnSelect	false	false	Flag that allow to clear the selection, selecting the selected item from the list
onReachThreshold	function void	false	triggered function when item from the threshold config enters the view
threshold	3	false	Index of the item from the bottom of the list that is being watched when is in or out the view
async	false	false	If true, it calls onInputChange when the search input changes; if false, it calls a local function that filters the list of options.
classes	{   root: ''   select: ''   input: ''   list: ''   listItem: ''   listItemActive: '' }	false	Styles class for the different components within
loadingLabel	'loading'	false	Custom text displayed when component status 'loading = true'
placeholder	'Select one'	false	Custom text displayed when is no item selected