Pular para o conteúdo principal

Search

Base​

Pesquisar ao enviar​

Deve ser usada a propriedade onSubmit para definir um callback que será chamado quando a pessoa usuária clicar no botão de submit ou pressionar enter no teclado.

Pesquisar ao digitar​

A propriedade onChange é usada para definir um callback que será chamado quando a pessoa usuária digitar algo.

A propriedade onClear​

A propriedade onClear é usada para definir um callback que será chamado quando a pessoa usuária clicar no botão de limpar.

Definindo um valor padrão​

Para renderizar o Search com um valor inicial é necessário usar a propriedade defaultValue. Com ela, o componente Search vai lidar com as mudanças de estado sozinho.

Controlando as mudanças de estado​

Para controlar as mudanças de estado, é necessário usar a propriedade value junto com o retorno do callback onChange.

A propriedade loading​

É possível adicionar a propriedade loading para exibir um Spinner, indicando que alguma pesquisa assíncrona está em execução.

Dica

Use uma função debounce dentro do callback onChange quando precisar fazer uma ação assíncrona, como uma requisição HTTP, por exemplo. Entenda mais sobre debounce e throttle aqui.

React Hook Form​

Use o componente Search junto com o React Hook Form. Para isso, instale essa dependência no projeto.

yarn add react-hook-form
import React from 'react';
import { useForm } from 'react-hook-form';
import {
  Form,
  Search,
  Button,
  Text
} from '@resultadosdigitais/tangram-components';

export default function WithReactHookForm() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();
  const [submitted, onSubmit] = React.useState();

  return (
    <>
      {submitted && (
        <Text>
          <strong>Submitted:</strong> <code>{JSON.stringify(submitted)}</code>
        </Text>
      )}

      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Control error={Boolean(errors.search)}>
          <Form.Label htmlFor="search-with-rhf">Search</Form.Label>
          <Search
            id="search-with-rhf"
            name="search"
            placeholder="Type your search..."
            aria-describedby="search-with-rhf"
            onSubmit={handleSubmit(onSubmit)}
            {...register('search', { required: true })}
          />

          {errors.search && (
            <Form.Feedback id="search-with-rhf-feedback">
              This field is required
            </Form.Feedback>
          )}
        </Form.Control>
        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

Veja e teste o exemplo completo abaixo:

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.