Adicionar um seletor de cores a um aplicativo React pode tornar muito mais fácil para os usuários tomar decisões sobre as cores que desejam usar. Os seletores de cores são uma ótima ferramenta para usuários que trabalham com aplicativos gráficos ou qualquer aplicativo compatível com personalização.
A biblioteca react-color oferece uma ampla gama de opções e muitos estilos de seleção de cores para atender às suas necessidades.
Adicionando um seletor de cores ao seu aplicativo
A biblioteca react-color facilita a adição de um seletor de cores ao seu aplicativo React. Essa biblioteca fornece uma maneira simples e intuitiva para os usuários selecionarem cores para seus aplicativos. O código é simples de usar e oferece uma ótima experiência ao usuário. Antes de adicionar um seletor de cores, primeiro você precisa criar um aplicativo de reação simples.
Uma visão geral do react-color
A biblioteca react-color é uma ótima maneira de adicionar um seletor de cores ao seu aplicativo React. Ele oferece uma interface fácil de usar que permite aos usuários escolher entre uma variedade de cores. A biblioteca também fornece acessórios que você pode usar para personalizar o seletor de cores.
O código para adicionar um seletor de cores ao seu aplicativo React é direto. Para usar a biblioteca react-color, primeiro você precisa instalar a biblioteca usando npm, o gerenciador de pacotes para Node.js.
npm i react-colorEm seguida, basta adicionar o seguinte código ao componente que deseja exibir o seletor de cores:
importar Reagir de'reagir'
importar { SketchPicker } de'reagir-cor'aulaComponenteestendeReagir.Componente{
render() {
retornar<SketchPicker />
}
}
exportarpadrão Componente
O código acima renderizará um seletor de cores básico. Ele permitirá que os usuários selecionem entre uma variedade de cores. O seletor também exibirá o código HEX da cor selecionada, que você pode usar em outras partes do seu aplicativo.
Adereços Disponíveis
A biblioteca react-color fornece acessórios para personalizar o seletor de cores. Você pode usar esses acessórios para alterar o tamanho do seletor, as cores disponíveis e muito mais.
Abaixo estão os adereços disponíveis para o Color Picker:
- largura: a largura do seletor de cores em pixels.
- altura: a altura do seletor de cores em pixels.
- cor: A cor inicial do seletor.
- em mudança: Uma função de retorno de chamada que é executada quando a cor muda.
- onChangeComplete: Uma função de retorno de chamada que é executada quando a mudança de cor é concluída.
O código a seguir mostra como usar todos os adereços disponíveis para o Color Picker:
importar Reagir de'reagir'
importar { SketchPicker } de'reagir-cor'
aulaComponenteestendeReagir.Componente{
render() {
retornar (
largura={200}
altura={200}
cor="#ff0000"
onChange={(cor) => console.log (cor)}
onChangeComplete={(cor, evento)=> console.log (cor)}
/>
)
}
}
exportarpadrão Componente
O código acima renderizará um seletor de cores com uma largura de 200px, uma altura de 200px, uma cor inicial de #ff0000 e uma paleta de cores. Ele também mostrará um campo de entrada para o código de cores e exibirá o canal alfa. Quando a cor mudar, ele chamará o retorno de chamada onChange e registrará a nova cor no console.
Adicionando seletores de cores adicionais
A biblioteca react-color fornece uma variedade de seletores de cores diferentes para escolher e, além do SketchPicker usado na última seção, você também pode usar o ChromePicker.
Importe o ChromePicker da mesma forma que você importou o SketchPicker:
importar { Chrome Picker } de'reagir-cor';Depois de importar o ChromePicker, você pode usá-lo em seu aplicativo adicionando o seguinte código:
cor={ esse.estado.fundo }
onChangeComplete={ esse.handleChangeComplete }
desativarAlfa={verdadeiro}
/>O ChromePicker usa os mesmos adereços do SketchPicker, mas também tem algumas opções adicionais, como a capacidade de desabilitar o canal alfa, que você pode fazer com o prop disableAlpha. Você também pode definir a cor diretamente com o suporte de cor.
Há também outros seletores de cores disponíveis na biblioteca react-color, como Block, Twitter e GitHub. Cada um desses seletores tem seus próprios acessórios, portanto, verifique a documentação para obter mais informações.
Melhore a experiência do usuário com um seletor de cores
Adicionar um seletor de cores ao seu aplicativo React é uma ótima maneira de melhorar a experiência do usuário. Ele permite que os usuários selecionem as cores de forma rápida e fácil para suas aplicações. Você também pode tornar o seletor de cores mais fácil de usar usando o Tailwind CSS.
