What it does
The MIT-licensed react-colorful package connects a colour-picker component to React or Preact state. It includes typed colour models and separate callbacks for continuous edits and the end of a selection.
Choose a picker whose value matches the application’s model, then pass the current colour and its state setter. onChange updates each drag or key press; onChangeEnd runs at mouseup, touchend or keyup, allowing an undo entry or save operation to wait until the gesture finishes.
Text entry is a separate component. Pair HexColorInput with the same state to support typing and pasting, and enable its alpha option for transparent HEX values. The input has no default styling, so its appearance belongs to the host form.
The MIT-licensed package has no runtime dependencies. Preact projects may need the documented React aliasing setup, and TypeScript combinations have a specific compatibility note.
Strengths
- Completed-change callbacks can defer expensive work.
- Typed picker models keep value shapes explicit.
- Text entry can share the picker’s state.
Watch out for
- The picker itself does not include a text field.
- The separate HEX input needs application styling.
Best for
- React or Preact editors that preview colour changes before saving
Sources
- react-colorful usage, callbacks and input component (Oct 27, 2026)
- react-colorful MIT licence (Oct 27, 2026)