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.
Busca assíncrona
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: