Por que os escolhidos de cores do React existentes me frustrou (e o que eu construí)
Depois de construir dezenas de aplicações de reação, pensei que escolher um seletor de cores seria simples. Basta pegar uma biblioteca popular da NPM, importar -a e seguir em frente, certo? Errado. Toda solução existente que eu tentei me deixou frustrada, levando -me a construir outra biblioteca e aqui está o porquê. O problema monolítico que iniciou tudo a maioria dos seleidores de cores reagentes oferece um único componente rígido que se parece com o seguinte:
Digite o modo de saída do modo de tela cheia, é isso. Uma caixa grande e inflexível com tudo o que está assado. Deseja mover o controle deslizante de matiz acima da área de saturação? Muito ruim. Precisa adicionar seus próprios controles personalizados entre o seletor e os controles deslizantes? Não está acontecendo. Deseja criar um layout horizontal compacto para celular? Desculpe, você está preso com o que o designer da biblioteca pensou que era melhor. A frustração: todo sistema de design é diferente, mas os catadores de cores o forçam a aceitar a visão deles ou o invadir com substituições de CSS quebradiças. O problema de inflexibilidade do layout Aqui está o que realmente me incomodou: eu precisava de um seletor de cores para uma ferramenta de design em que os requisitos de layout continuassem mudando. Às vezes, eu precisava de um layout horizontal compacto, às vezes vertical, às vezes eu queria injetar controles personalizados entre os componentes. Toda biblioteca que eu tentei me deu um layout pré-criado com opções limitadas de personalização. Quer o controle deslizante alfa acima do tom? Não é possível. Precisa adicionar uma paleta predefinida personalizada entre a área de saturação e os controles deslizantes? Boa sorte com hacks CSS. A frustração: por que não posso simplesmente organizar os componentes do seletor de cores exatamente como meu design precisa deles? O CSS substitui o pesadelo que a maioria dos catadores coloridos vem com seus próprios CSs pelos quais você precisa lutar. Deseja combinar o raio de fronteira do seu sistema de design? Substituir seus estilos. Precisa de espaçamento personalizado? Mais substituições de CSs. Modo escuro? Espero que eles pensassem nisso. Passei mais tempo lutando com a especificidade do CSS e! Declarações importantes do que realmente construindo recursos. O seletor de cores deve funcionar com seu sistema de design, não contra ele. A frustração: por que estou lutando contra o CSS da biblioteca quando quero apenas escolher cores? State management that fights you Here’s a scenario that drove me crazy: I’m building a design tool where users work in HSL values, but every color picker I tried would: Take my HSL input Convert it internally to RGB or HSV Give me back a completely different HSL value due to rounding errors Force me to manage the “drift” between what the user input and what I get back Want to initialize with { h: 240, s: 100, l: 50 } and get back Exatamente esse formato? Boa sorte. A maioria das bibliotecas possui sua própria gestão de estado interna que pressupõe que você queira qualquer formato que prefira. A frustração: eu sei que formato eu quero – por que você não vai simplesmente me dar? O que eu construí: react-beautiful-cor depois de atingir essas paredes repetidamente, decidi construir algo diferente. Veja como o React-Beautiful-Color resolve cada um desses problemas: componentes compostos que realmente compõem, em vez de um componente gigante, você recebe peças compostas:
Colorpicker.eyedropper>
Div> Div> Colorpicker> Digite o modo de saída da tela cheia que deseja que o controle deslizante de matiz na parte superior? Mova -o. Precisa de um layout personalizado? Construa. Quer adicionar seus próprios controles? Solte -os em qualquer lugar. Você controla o layout, não a biblioteca. Arquitetura de componentes compostos verdadeiros, diferentemente de outras bibliotecas que oferecem um componente monolítico, o React-Beautiful-Color é construído a partir do chão como peças composáveis. Cada parte (saturação, matiz, alfa, eloyropper) é um componente independente que você pode organizar como desejar. Precisa de um layout personalizado? Compor isso. Quer adicionar seus próprios componentes entre as peças? Deixá -los. Construindo um sistema de design com requisitos de espaçamento específicos? Você controla todos os aspectos do layout. Preservação do formato que realmente trabalha o usecolorstate Hook preserva seu formato de entrada, enquanto fornece todos os formatos instantaneamente: const [{ colorInput, colorState }, setColor] = usecolorState ({type: ‘hsl’, h: 240, s: 100, l: 50}); // colorInput permanece como hsl – sem deriva de formato! console.log (colorInput); // {type: ‘hsl’, h: 240, s: 100, l: 50} // Mas você obtém todos os formatos instantaneamente console.log (colorstate.hex); // “#0000FF” console.log (colorstate.rgb); // {r: 0, g: 0, b: 255} console.log (colorstate.hsv); // {h: 240, S: 100, V: 100} Digite Modo de tela cheia Sair Modo de tela cheia sem deriva de conversão. Nenhuma luta estatal. Apenas o formato que você deseja, quando quiser. A abordagem de estilo de Tailwind-primeiro, em vez de enviar CSS personalizados que você precisa substituir, o React-Beautiful-Color usa classes puras de vento de cauda. Seu sistema de design usa Tailwind? Integração perfeita. Tokens de design personalizados? Basta passar aulas diferentes. Modo escuro? Apenas funciona. Nenhum substituto de CSS, sem guerras de especificidade, nenhum conflito de estilo. Os componentes são não sindicalizados por padrão e aceitam as classes de Tailwind que você deseja aplicar. APIs modernas do navegador Suporte integrado para a API do Eyedropper significa que os usuários podem escolher cores diretamente em sua tela-não é necessária implementações ou poli-preenchimentos complexos. O TypeScript do dia um tipo completo de segurança com sindicatos discriminados significa que você captura erros de formato de cores no momento da compilação, não em tempo de execução. O Intellisense funciona perfeitamente, e a refatoração é segura. O resultado: a construção da felicidade com o React-Beautiful-Color parece diferente. Em vez de lutar contra a biblioteca, você está compondo com ela. Em vez de trabalhar em torno de limitações, você está construindo exatamente o que precisa. O padrão de componente composto significa que todos os casos de uso que encontrei de entradas simples de cores a ferramentas de design complexas podem ser construídas elegantemente sem hacks ou soluções alternativas. Você obtém uma API de componente composto verdadeiramente flexível que se adapta ao seu sistema de design, em vez de forçar seu sistema de design a se adaptar a ele. Todo componente é independente estilável, posicionável e composto. Às vezes, a melhor solução não está encontrando a biblioteca perfeita – está construindo a biblioteca que você gostaria que existisse. Documentação e exemplos: React-beautiful-color.dev
Fonte
