1.1.3 • Published 4 years ago

@logicamente.info/react-select-brasil v1.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

React-Select-Brasil

Build status Package version

Este é um Component React que cria um campo de seleção com temáticas trabalhadas no Brasil.

Para ver este projeto funcionando, faça o download e execute yarn start.

Instalação

$ npm i -S @logicamente.info/react-select-brasil # NPM user
$ yarn add @logicamente.info/react-select-brasil # YARN user

Uso

import React from 'react';
import SelectBrasil from '@logicamente.info/react-select-brasil';

export default class Demo extends React.Component {
  render() {
    return (
      <SelectBrasil.CategoriaCNH
        value={this.state.categoria}
        onChange={(e) => this.setState({ categoria: e?.value })}>
    );
  }
}

Tipos implementados

ComponenteTemática
SelectBrasil.CommonSelectComponente base para a criação de novos componentes de seleção, não é possível renderizar este componente diretamente
SelectBrasil.BancosExibe seleção de bancos existentes no Brasil, sendo o valor resultante o código do banco
SelectBrasil.CategoriasCNHExibe seleção de categorias de carteira de habilitação A, B, AB, C, D e E
SelectBrasil.CidadesExibe seleção de cidades para um dado estado. Este componente possui uma propriedade obrigatória estado que deve receber a sigla do estado das cidades a serem exibidas
SelectBrasil.EstadosExibe seleção dos estados brasileiros
SelectBrasil.EstadosCivisExibe selação dos estados civís possíveis (solteiro(a), casado(a), divorciado(a)...)
SelectBrasil.GenerosExibe seleção de gêneros (masculino, feminino, cisgênero...)
SelectBrasil.GrausInstrucaoExibe seleção de graus de instrução escolares (médio, superior...)
SelectBrasil.NacionalidadesExibe seleção de nacionalidades, isto é, o país de origem de uma pessoa (brasileiro, canadense, tibetano...)
SelectBrasil.RacasExibe seleção de raças e cores conforme os valores esperados pelo IBGE (branca, parda, preta...)
SelectBrasil.UnidadesMedidaExibe seleção de unidades de medida conforme necessário em notas fiscais

Retorno do onChange

Toda alteração da opção selecionada causará a emissão do evento change. Você deve utilizar esse método para atualizar o estado.

O valor da propriedade onChange deve ser uma função. Nela o componente injetará no primeiro parâmetro os dados da opção selecionada no formato de objeto JS com o valor { value: 'valor', label: 'texto' } ou null caso não tenha uma opção selecionada.

Ao selecionar cidades ou estado, o método também retornará o código IBGE da opção selecionada (e.g. { value: 'RO', label: 'Rondônia', ibge: 11 }).

Props

Utilizamos como base o react-select para a criação dos controles gráficos. Todas as propriedades deste componente são as mesmas que o react-select, portanto verifique todas as possibilidades na documentação de propriedades deles.

Este componente utiliza a versão síncrona do react-select e suas opções não são controláveis.

Como criar meus próprios selects

Para criar selects com suas próprias opções, crie um componente que retorne CommonSelect e defina as opções nas propriedades dele. Sério, é só isso mesmo.

import SelectBrasil, {
  SelectProps,
} from "@logicamente.info/react-select-brasil";

export const MeuSelect = (props: SelectProps) => (
  <SelectBrasil.CommonSelect
    options={[
      { value: "1", label: "Um" },
      { value: "2", label: "Um" },
      { value: "3", label: "Tres" },
    ]}
    {...props}
  />
);

Contribua com o projeto

Para incluir outros selects neste projeto, faça o PR de uma nova branch contendo seu componente na pasta src/Components. Vamos analisar juntos e mesclar suas alterações na master. Siga o processo de criação de selects personalizados acima.

$ yarn start # Inicia a aplicação rodando o especificado em `./demo/src/index.js`
$ yarn build # Gera os módulos para distribuição
1.1.1

4 years ago

1.1.0

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.0.10

4 years ago

1.0.9

5 years ago