BjSearch

Formulaire de recherche React : champ type search, envoi avec la valeur courante, taille md ou lg.

Utilisation

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  function onSubmit(value: string) {
    console.log(value)
  }
  return (
    <BjSearch
      value={q}
      onChange={(e) => setQ(e.target.value)}
      onSubmit={onSubmit}
      placeholder="Rechercher sur le site…"
    />
  )
}

Aperçu

Taille large

size lg ajoute bj-search--lg (pas de variante sm dans le composant React).

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  return (
    <BjSearch
      value={q}
      onChange={(e) => setQ(e.target.value)}
      onSubmit={console.log}
      size="lg"
      placeholder="Recherche large…"
    />
  )
}

Libellé du bouton

buttonLabel change le texte du bouton par défaut.

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  return (
    <BjSearch
      value={q}
      onChange={(e) => setQ(e.target.value)}
      onSubmit={() => {}}
      buttonLabel="Lancer"
      placeholder="Mots-clés…"
    />
  )
}

Bouton personnalisé

children remplace l’icône et le span du bouton submit.

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  return (
    <BjSearch value={q} onChange={(e) => setQ(e.target.value)} onSubmit={() => {}} placeholder="SKU…">
      <span aria-hidden>Go</span>
    </BjSearch>
  )
}

Combinaisons

placeholder, size lg, buttonLabel et aria-label sur le form.

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  return (
    <BjSearch
      aria-label="Recherche catalogue"
      value={q}
      onChange={(e) => setQ(e.target.value)}
      onSubmit={(v) => fetch(`/api/search?q=${encodeURIComponent(v)}`)}
      size="lg"
      buttonLabel="Filtrer"
      placeholder="Référence ou libellé…"
    />
  )
}

value, onChange et onSubmit

Champ contrôlé avec onChange ; onSubmit reçoit la valeur au submit.

import { useState } from 'react'
import { BjSearch } from '@flrxnt/dsbj/react'

export default function Example() {
  const [value, setValue] = useState('')
  return (
    <BjSearch
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onSubmit={(submitted) => {
        console.log('submit', submitted)
      }}
    />
  )
}

Props

Prop	Description
`value`	Valeur contrôlée du champ, chaîne.
`onChange`	Gestionnaire de changement sur l’input search.
`onSubmit`	Appelé avec la chaîne courante lors de la soumission du formulaire (preventDefault appliqué).
`placeholder`	Placeholder du champ (défaut Rechercher…).
`size`	Taille : md (défaut) ou lg (bj-search--lg).
`buttonLabel`	Texte du bouton d’envoi (défaut Rechercher).
`children`	Contenu du bouton ; remplace l’icône et le libellé par défaut.
`className`	Classe CSS sur l’élément form.
`…`	Autres attributs HTML natifs du form (onSubmit et children sont réservés par le composant).