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