HexInput component

[omgovich]

In case if the user needs to have a text field to type/paste HEX-color, he could import additional HexInput component which works well in pair with the picker and costs just 400 bytes:

import ColorPicker from "react-colorful";
import HexInput from 'react-colorful/HexInput';

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return (
    <div>
      <ColorPicker color={color} onChange={setColor} />
      <HexInput color={color} onChange={setColor} />
    </div>
  );
};

This component doesn't have any default styles. It's just an input with proper behavior. The developers could place and tweak this component any way they want.

BTW I noticed that ~33% of the HexInput's bundle size was the spread operator polyfill, so I used React.createElement("input", Object.assign({}, props, extraProps)) to fix that.

How to test

npm run start-demo

[omgovich]

@molefrog Could you take a look?

[omgovich]

@molefrog I updated "Why react-colorful" section with:

ships only a minimal amount of manually optimized color conversion algorithms (while most of the popular pickers import entire color manipulation libraries that increase the bundle size by more than 10 KB and make your app slower).

Just wanted to mention that I polished the code to save bytes.
But not sure about the text inside the brackets. Probably too aggressive)

Alternative text:

doesn't import 10+ KB color conversion libraries, but ships only a minimal amount of manually optimized color conversion algorithms.

[molefrog]

@omgovich Should be fine!

[molefrog]

Well, that's smart!