React-color: 3.0.0 Proposal

[casesandberg]

I would like to start a discussion on some features and proposals for the next major version of React Color. Here is what I have been thinking:

~React Native Support~

This would require a rewrite of all of the components to use react-primitives. Everything has already been written with inline styles so this will make our job much easier. Along with support for RN, I think we should introduce a few new color pickers that are prevalent in native (Snapchat, Facebook, etc..)

Base Draggable Component

I propose a base component that handles the dragging and calculating of pixel values and position and leaves the translation of color spaces to the components that use it. Right now each component does a bunch of math on their own to figure this out. There have been a couple of requests (#395, #313) to create more sliders or gradient components. This would make them easier to add as well as a great common component for people to use to make their own.

Using Children For Swatches

The API footprint has grown quite a bit to allow for extended functionality of the swatches (#305). I propose we instead move everything over into a new Palette component like the one that @SpencerDawson has been working on and allow people to change the swatches by passing them down as children:

<SketchPicker>
  <MyCustomPalette />
  // or
  { colors.map((color) => (
    <div style={{ background: color }} />
  )) }
</SketchPicker>

Support AMD, UMD & CDN's

I also propose that the NPM package have a dist folder with both a bundled and a minified version of react-color for use as drop in JS files. This has been requested in #310 and #364.

Type Definition Files

There is a ts definition file in definitely typed, but it is always out of date. I think we should provide both TS and Flow definition files alongside the library for people using typed environments.

New Documentation Backing

Right now the documentation site uses a very janky setup that I created a long time ago. I think we should probably move it over to something that has better community support such as Gatsby. I am open to suggestions here.

Smaller Things

• Investigate if there is a better, smaller library than tinycolor2 for our color conversions. #184
• Look into adding more accessibility support. #359
• Collaborate to create a vision doc that explains where the project is going.
• Make all components that take user input uncontrolled when focused #404, #216, #371
• Extend color spectrums that pickers return on change #66, #215

[SpencerDawson]

@casesandberg for your color conversions, maybe colr?

EDIT: the minified version of tinycolor2 is twice the sice of Colr, and Colr, according to their benchmarks, is faster.

[casesandberg]

Per Documentation: We should use https://www.gitbook.com/ until Workbench is done

[LKay]

About typescript, as an author of the mentioned definitions I can provide support for these in the repo. Anyway, maybe rewriting the library in typescript wouldn't be that bad of an idea? It's just superset of javascript so current code will still be fine and would just need some types sugar. Probably won't take more than a couple of days to do that.

[casesandberg]

AH, great to hear about TypeScript! I am actually going to be kicking off the rewrite using flow, do you know if there is an easy way to sync definition files between the two?

[LKay]

Unfortunately there is no automated way of syncing TS and Flow easy way. At least not any popular one that works most cases. If you want to add static types to your code you should decide between the two and probably backport types definitions to the other one.

[jomnius]

Since I don't know (yet) much about javascript or react native, I'll make this request: can you make react-color modular in such a way that app could load only selected color pickers instead of everything? Actually I don't know, if this is already possible :)

[jomnius]

Btw comment about colr mentioned above: benchmarking on their README was done 3 years ago, according to git blame. It might still be correct, but I would not trust it without new tests.

[SpencerDawson]

@jomnius that is a very valid point. I missed that. ty.

[saadq]

I wrote some type definitions for Flow (for the current version of react-color) and put them in flow-typed in case it is of use.

[ekoeryanto]

Look like I missed this issue.

511

and please, allow me to publish it to NPM because I need it ASAP,
https://unpkg.com/@pake/react-color/

[harjis]

Hi. First of all nice work with color picker. It has helped our project a lot.

Do you have some estimate on when 3.0.0 would be released with flow type annotations? To me it seems that some of the annotations in flow-typed repository are no more up to date. I have already done some changes to them but I think there is still some types that are not up to date. If it looks like 3.0.0 with flow types are not going to land anytime soon I can help with updating the flow-typed annotations.

[LightningXCE]

Hello!

Great work with these, they're super slick!

I was just curious if there had been an update as well to the 3.0 release, as I am hoping to use this within a react-native application. Is the 3.0 branch currently compatible?

Thanks again!

[fanatic75]

Does this work in react native?

[TommyHarty]

Does this work in React Native yet?

[nikg41]

Does this works in React Native yet or not?