React-Select-Brasil

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

| Componente | Temática | | :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | SelectBrasil.CommonSelect | Componente base para a criação de novos componentes de seleção, não é possível renderizar este componente diretamente | | SelectBrasil.Bancos | Exibe seleção de bancos existentes no Brasil, sendo o valor resultante o código do banco | | SelectBrasil.CategoriasCNH | Exibe seleção de categorias de carteira de habilitação A, B, AB, C, D e E | | SelectBrasil.Cidades | Exibe 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.Estados | Exibe seleção dos estados brasileiros | | SelectBrasil.EstadosCivis | Exibe selação dos estados civís possíveis (solteiro(a), casado(a), divorciado(a)...) | | SelectBrasil.Generos | Exibe seleção de gêneros (masculino, feminino, cisgênero...) | | SelectBrasil.GrausInstrucao | Exibe seleção de graus de instrução escolares (médio, superior...) | | SelectBrasil.Nacionalidades | Exibe seleção de nacionalidades, isto é, o país de origem de uma pessoa (brasileiro, canadense, tibetano...) | | SelectBrasil.Racas | Exibe seleção de raças e cores conforme os valores esperados pelo IBGE (branca, parda, preta...) | | SelectBrasil.UnidadesMedida | Exibe 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