**`SelectComponent`** is a versatile selection component in React. It includes search, filtering, multi-select, and custom formatting options, making it easy to integrate and customize to fit your needs.
npm install select-componentsSelectComponent is a versatile selection component in React. It includes search, filtering, multi-select, and custom formatting options, making it easy to integrate and customize to fit your needs.
bash
npm install select-components
`
Usage Examples
Basic Selection
The render prop should be an array of objects containing the name property.
`jsx
const urgency = [
{ name: "Alta" },
{ name: "Media" },
{ name: "Baja" },
]);
render={urgency}
name="simpleSelect"
placeholder="Seleccione una opción"
onSelect={(value) => console.log("Seleccionado:", value)}
/>
`
Compatibility with react-hook-form
Use ControllerSelectComponent to integrate SelectComponent with react-hook-form.
Basic Controller
`jsx
name={"urgency"}
control={control}
required={true}
render={[{ name: "Alta" }, { name: "Media" }, { name: "Baja" }]}
placeholder="Elija la urgencia"
/>
`
Enable Search
Enable real-time search using an endpoint to fetch data.
`jsx
{...{
name: "Sparepart_order",
onSelect: handleOnSelect,
placeholder: "Escribe el nombre repuesto",
isSearch: true, // Activar búsqueda
funtionSearch: getSpareParts, Endpoint para la búsqueda
control: control,
}}
/>
`
Custom Formatting
Define a custom format for each option.
`jsx
name="formattedSelect"
render={[{ name: "Alta" }, { name: "Media" }, { name: "Baja" }]}
customFormat={(item) => {item.customLabel}}
/>
`
Multi-Select
Enable the selection of multiple options.
`jsx
name="multipleSelect"
render={[{ name: "Alta" }, { name: "Media" }, { name: "Baja" }]}
isMultiple={true}
placeholder="Seleccione varias opciones"
/>
`
By Category
Create sub-options organized by categories:
`jsx
const unitOptions = [
{
title: "Adimensional",
options: [{ name: "u" }]
},
{
title: "Volumen",
options: [
{ name: "m3" },
{ name: "cm3" },
{ name: "L" },
{ name: "ml" },
],
},
{
title: "Masa",
options: [
{ name: "kg" },
{ name: "g" },
{ name: "mg" },
],
},
]
name="advancedSelect"
render = {unitOptions}
searchProperty="title"
isCategory={true}
defaultValue="Option1"
/>
``