componente · @solu30/ui-kit/input
ArrayItemsEditor
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { ArrayItemsEditor } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| items | sí | T[] | Current list of items |
| onChange | sí | (items: T[]) => void | Called with the updated list on any change |
| fields | sí | FieldDef[] | Field definitions — each entry renders one input or textarea per item |
| addLabel | sí | string | Label for the "add item" button |
| emptyText | opcional | string | Text shown when the list is empty (default: "No items yet.") |
| disabled | opcional | boolean | Disables all inputs and add/remove buttons |
Ejemplo del paquete
<ArrayItemsEditor<BenefitItem>
items={benefits}
onChange={setBenefits}
fields={[
{ key: 'icon', label: 'Icon', type: 'text', placeholder: 'heart, leaf…' },
{ key: 'title', label: 'Title', type: 'text' },
{ key: 'text', label: 'Description', type: 'textarea' },
]}
addLabel="Add benefit"
/>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.