adasi_components v0.0.35
Documentação do Componente SelectCityAsync
O SelectCityAsync
é um componente React que fornece uma caixa de seleção para buscar cidades assincronamente através de uma API.
Importação
Importe o componente SelectCityAsync
para utilizá-lo em seu projeto:
import { SelectCityAsync } from 'adasi_components';
Props
O componente SelectCityAsync
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
apiRoute | string | Opcional. Rota da API para buscar as cidades. |
onChange | (e: { target: { name: string; value: unknown } }) => void | Função para lidar com a mudança de valor da caixa de seleção. |
onBlur | (e: { target: { name: string; value: unknown } }) => void | Função para lidar com o evento "blur" (quando o campo perde o foco). |
value | { value: string; label: string } | O valor atual selecionado na caixa de seleção. |
id | string | Um identificador único para a caixa de seleção. |
isDark | boolean | Opcional. Indica se o componente deve ser renderizado em modo escuro. |
...rest | Props | Outras props disponíveis do componente react-select - Lista de Props. |
Exemplo de Uso
import React, { useState } from 'react';
import { SelectCityAsync } from './caminho/para/SelectCityAsync';
const MyComponent = () => {
const [selectedCity, setSelectedCity] = useState(null);
const handleCityChange = (selectedOption) => {
setSelectedCity(selectedOption);
};
return (
<div>
<h2>Selecione uma cidade:</h2>
<SelectCityAsync
apiRoute="https://www.example.com.br/cities"
onChange={handleCityChange}
value={selectedCity}
id="citySelect"
isDark={true}
/>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente SelectCityAsync
utiliza a biblioteca react-select
para renderizar a caixa de seleção. Ele faz uma busca assincrona de cidades através da API especificada na prop apiRoute
e retorna as opções disponíveis para seleção.
Notas
- Certifique-se de fornecer uma rota válida na prop
apiRoute
para que a busca das cidades funcione corretamente. - A prop
isDark
é opcional, e se definida comotrue
, aplicará um estilo de modo escuro ao componente. Caso contrário, o estilo padrão será aplicado.
Documentação do Componente CnpjInput
O CnpjInput
é um componente React que fornece uma caixa de entrada para inserir um CNPJ e formata automaticamente o valor conforme o usuário digita.
Importação
Importe o componente `CnpjInput` para utilizá-lo em seu projeto:
import { CnpjInput } from 'adasi_components';
Props
O componente CnpjInput
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
value | string | O valor do CNPJ na caixa de entrada. |
handleChange | (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CNPJ. |
inputId | string | Um identificador único para a caixa de entrada. |
...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |
Exemplo de Uso
import React, { useState } from 'react';
import { CnpjInput } from './caminho/para/CnpjInput';
const MyComponent = () => {
const [cnpj, setCnpj] = useState('');
const handleCnpjChange = (e) => {
setCnpj(e.target.value);
};
return (
<div>
<h2>Digite um CNPJ:</h2>
<CnpjInput
value={cnpj}
handleChange={handleCnpjChange}
inputId="cnpjInput"
placeholder="Digite o CNPJ"
/>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente CnpjInput
utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CNPJ. Ele também inclui a função replace
para formatar o valor do CNPJ conforme o usuário digita.
Notas
- Certifique-se de fornecer um identificador único na prop
inputId
para a caixa de entrada do CNPJ. - O componente exibe um placeholder padrão "Digite o CNPJ", mas você pode personalizá-lo utilizando a prop
placeholder
.
Documentação do Componente CpfInput
O CpfInput
é um componente React que fornece uma caixa de entrada para inserir um CPF e formata automaticamente o valor conforme o usuário digita.
Importação
Importe o componente `CnpjInput` para utilizá-lo em seu projeto:
import { CpfInput } from 'adasi_components';
Props
O componente CpfInput
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
value | string | O valor do CPF na caixa de entrada. |
handleChange | (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CPF. |
inputId | string | Um identificador único para a caixa de entrada. |
...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |
Exemplo de Uso
import React, { useState } from 'react';
import { CpfInput } from './caminho/para/CpfInput';
const MyComponent = () => {
const [cpf, setCpf] = useState('');
const handleCpfChange = (e) => {
setCpf(e.target.value);
};
return (
<div>
<h2>Digite um CPF:</h2>
<CpfInput
value={cpf}
handleChange={handleCpfChange}
inputId="cpfInput"
placeholder="Digite o CPF"
/>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente CpfInput
utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CPF. Ele também inclui as funções hasCpfSize
e replace
para formatar o valor do CPF conforme o usuário digita.
Notas
- Certifique-se de fornecer um identificador único na prop
inputId
para a caixa de entrada do CPF. - O componente exibe um placeholder padrão "Digite o CPF", mas você pode personalizá-lo utilizando a prop
placeholder
.
Documentação do Componente CpfCnpjInput
O CpfCnpjInput
é um componente React que fornece uma caixa de entrada para inserir um CPF ou CNPJ e formata automaticamente o valor conforme o usuário digita. Ele é um componente de seleção entre CpfInput
e CnpjInput
, que são componentes responsáveis por formatar e tratar entradas de CPF e CNPJ, respectivamente.
Importação
Importe o componente `CnpjInput` para utilizá-lo em seu projeto:
import { CpfCnpjInput } from 'adasi_components';
Props
O componente CpfCnpjInput
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
isCpf | boolean | Opcional. Indica se o componente deve ser renderizado como CpfInput ou CnpjInput . O valor padrão é true (CpfInput). |
value | string | O valor do CPF ou CNPJ na caixa de entrada. |
handleChange | (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CPF ou CNPJ. |
inputId | string | Um identificador único para a caixa de entrada. |
...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |
Exemplo de Uso
import React, { useState } from 'react';
import { CpfCnpjInput } from './caminho/para/CpfCnpjInput';
const MyComponent = () => {
const [document, setDocument] = useState('');
const handleDocumentChange = (e) => {
setDocument(e.target.value);
};
return (
<div>
<h2>Digite um CPF ou CNPJ:</h2>
<CpfCnpjInput
value={document}
handleChange={handleDocumentChange}
inputId="documentInput"
placeholder="Digite o CPF ou CNPJ"
/>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente CpfCnpjInput
utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CPF ou CNPJ. Ele decide qual componente utilizar (CpfInput
ou CnpjInput
) com base na prop isCpf
.
Notas
- Certifique-se de fornecer um identificador único na prop
inputId
para a caixa de entrada do CPF ou CNPJ. - O componente exibe um placeholder padrão "Digite o CPF ou CNPJ", mas você pode personalizá-lo utilizando a prop
placeholder
.
Documentação do Componente SelectInput
O SelectInput
é um componente React que fornece uma caixa de seleção personalizada. Ele utiliza a biblioteca react-select
para renderizar a caixa de seleção e permite a escolha de uma ou várias opções, dependendo da prop isMulti
.
Instalação
Para utilizar o componente, você precisa ter o react-select instalado em seu projeto. Caso ainda não o tenha instalado, utilize o seguinte comando:
npm install react-select
Importação
Importe o componente `CnpjInput` para utilizá-lo em seu projeto:
import { selectInput } from 'adasi_components';
Props
O componente SelectInput
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
invalid | boolean | Opcional. Indica se o componente está inválido ou não. O valor padrão é false . |
options | Option[] | As opções disponíveis para seleção no formato de um array de objetos com as propriedades value e label . |
isDark | boolean | Opcional. Indica se o componente deve ser renderizado em modo escuro ou não. O valor padrão é true . |
inputId | string | Um identificador único para o componente de seleção. |
isMulti | boolean | Opcional. Indica se o componente deve permitir seleção múltipla ou não. O valor padrão é false . |
onChange | (target: any) => any | Função para lidar com a mudança de valor do componente de seleção. |
onBlur | (target: any) => any | Função para lidar com o evento de perda de foco do componente de seleção. |
...rest | Props | Outras props disponíveis do componente react-select. |
Exemplo de Uso
import React, { useState } from 'react';
import { SelectInput } from './caminho/para/SelectInput';
const MyComponent = () => {
const [selectedOption, setSelectedOption] = useState(null);
const options = [
{ value: 'option1', label: 'Opção 1' },
{ value: 'option2', label: 'Opção 2' },
{ value: 'option3', label: 'Opção 3' },
];
const handleSelectChange = (target) => {
setSelectedOption(target.value);
};
return (
<div>
<h2>Selecione uma opção:</h2>
<SelectInput
options={options}
isMulti={false}
isDark={true}
inputId="selectOption"
value={selectedOption}
onChange={handleSelectChange}
placeholder="Selecione uma opção..."
/>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente SelectInput
utiliza a biblioteca react-select para renderizar a caixa de seleção personalizada. Ele inclui a função convertEventSelectToTarget
para converter o evento do Select em um objeto "target", que pode ser usado para manipular os dados selecionados.
Notas
- Certifique-se de fornecer um identificador único na prop
inputId
para o componente de seleção. - O componente exibe um placeholder padrão "Selecione uma opção...", mas você pode personalizá-lo utilizando a prop
placeholder
.
Documentação do Componente ZipCodeInput
O ZipCodeInput
é um componente React que fornece uma caixa de entrada para inserir um CEP e automaticamente completa as informações de logradouro, bairro, cidade, estado, etc., através da API de consulta de CEP do ViaCEP.
Importação
import { ZipCodeInput } from 'adasi_components';
Props
O componente ZipCodeInput
aceita as seguintes props:
Prop | Tipo | Descrição |
---|---|---|
changeInputs | (e: IApiResponseZipcode) => void | Função para lidar com a resposta da API de consulta de CEP, passando as informações obtidas do CEP. |
...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |
Exemplo de Uso
import React, { useState } from 'react';
import { ZipCodeInput } from './caminho/para/ZipCodeInput';
const MyComponent = () => {
const [zipcodeInfo, setZipcodeInfo] = useState({});
const handleZipcodeChange = (zipcodeData) => {
setZipcodeInfo(zipcodeData);
};
return (
<div>
<h2>Digite um CEP:</h2>
<ZipCodeInput
value={zipcodeInfo.cep}
changeInputs={handleZipcodeChange}
inputId="zipcodeInput"
placeholder="Digite o CEP"
/>
<div>
<h3>Informações do CEP:</h3>
<p>Logradouro: {zipcodeInfo.logradouro}</p>
<p>Bairro: {zipcodeInfo.bairro}</p>
<p>Cidade: {zipcodeInfo.localidade}</p>
<p>Estado: {zipcodeInfo.uf}</p>
</div>
</div>
);
};
export default MyComponent;
Detalhes de Implementação
O componente ZipCodeInput
utiliza a biblioteca cleave.js para formatar o CEP e inclui a função validate
para obter informações do CEP através da API do ViaCEP.
Notas
- Certifique-se de fornecer um identificador único na prop
inputId
para a caixa de entrada do CEP. - O componente exibe um placeholder padrão "Digite o CEP para pesquisar", mas você pode personalizá-lo utilizando a prop
placeholder
. `
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago