SearchBar

Campo de texto con forma de píldora, ícono de búsqueda al inicio y botón de limpieza que aparece cuando hay texto. Los cambios se debouncean antes de disparar onChange. Presionar Enter activa onEnterPress de inmediato. El campo puede limpiarse programáticamente incrementando la prop clearTrigger.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onChange | (value: string) => void | No | — | Se ejecuta tras el tiempo de debounce cuando el valor cambia. También se ejecuta al limpiar. | | onEnterPress | (value: string) => void | No | — | Se ejecuta al presionar Enter. | | placeholder | string | No | 'Search...' | Texto de placeholder del input. | | debounceTime | number | No | 300 | Milisegundos de espera tras la última tecla antes de disparar onChange. | | clearTrigger | number | No | — | Incrementar este valor limpia el input. | | searchIcon | string | No | 'search' | Nombre del ícono de búsqueda. | | searchIconColor | string | No | text del tema | Color del ícono de búsqueda. | | searchIconSize | number | No | — | Tamaño del ícono de búsqueda en píxeles. | | clearIcon | string | No | 'close' | Nombre del ícono del botón de limpieza. | | clearIconColor | string | No | text del tema | Color del ícono de limpieza. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor. | | inputStyle | React.CSSProperties | No | — | Estilos del input. |

Uso

Búsqueda debounced básica

import SearchBar from '@/components/SearchBar';

export default function Example() {
  return (
    <SearchBar
      placeholder="Buscar productos..."
      onChange={(value) => console.log('Búsqueda:', value)}
    />
  );
}

Buscar al presionar Enter con limpieza programática

import { useState } from 'react';
import SearchBar from '@/components/SearchBar';

export default function Example() {
  const [clearTrigger, setClearTrigger] = useState(0);

  return (
    <>
      <SearchBar
        onEnterPress={(value) => console.log('Buscando:', value)}
        clearTrigger={clearTrigger}
      />
      <button onClick={() => setClearTrigger((prev) => prev + 1)}>
        Limpiar
      </button>
    </>
  );
}