Lighter and faster color picker

[omgovich]

Hi! 👋 My name is Vlad and I love to make packages/projects lighter and faster.

I noticed that you're using react-color which is 143 KB (far larger than the entirety of react-dom), is not tree-shakeable, is not accessible, does not support keyboard navigation, pulls in 12 dependencies, and is not as fast as it could be.

Ryan Christian, Alex Taktarov, and I had been working hard since July and several months ago we released react-colorful — a tiny fast alternative to react-color that aligned with modern requirements.

I would be glad if you consider using our component in your project to make the web faster.

Features

• Small: Just 1,9 KB gzipped (17 times lighter than react-color).
• Tree-shakeable: Only the parts you use will be imported into your app's bundle.
• Fast: Built with hooks and functional components only.
• Bulletproof: Written in strict TypeScript and covered by 40+ tests.
• Simple: The interface is straight forward and easy to use.
• Mobile-friendly: Works well on mobile devices and touch screens.
• Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
• No dependencies

Repo/docs:
https://github.com/omgovich/react-colorful

Demo:
https://omgovich.github.io/react-colorful

Article about react-color and react-colorful:
https://dev.to/omgovich/react-colorful-1-8-kb-color-picker-for-react-fast-dependency-free-customizable-and-accessible-8le

Regards,
Vlad

[gautamsi]

I think you should create a pull request for this

[omgovich]

We have one, actually. Our package is just modular, so we have the input as a separate component.
This modular structure allows us to adjust the picker better to designs.

Docs:
https://github.com/omgovich/react-colorful#how-to-paste-or-type-a-color

Demo:
https://codesandbox.io/s/react-colorful-hex-input-demo-0k2fx

To implement RGBA fields, we could just add 4 inputs (haven't seen a person who uses RGBA fields actually).

[omgovich]

Question: What is the easiest way to setup a development environment to be able to see and test the color picker?
The repo is quite big and I guess it'll take time to me to understand how to test this piece of entire project. Probably you could help me with some tips.

[gautamsi]

just clone the repo and go into one of the example and run "yarn dev", then if you make any changes anywhere it will do a hot reload in admin ui.

[omgovich]

Hi! Which version of yarn do you use?
When I run cd packages/fields-color && yarn add react-colorful it adds hundreds of lines to yarn.lock. And none of them are related to the color picker.

[gautamsi]

you dont want to do that, this repo uses yarn workspaces, you want to do
yarn workspace @keystonejs/fields-color add react-colorful

this has to be done in root of the repo
and yarn install must also be done from root of the repo

[bladey]

Thanks for contributing your component suggestion @omgovich, we'll take it into account!