Uncontrolled
The default. Pass defaultValue and let the panel keep the value:
<ColorInput defaultValue="#3366cc" onChangeComplete={(c) => save(c.hex)} />Controlled
You own it. Pass value and update it yourself:
const [color, setColor] = useState("#3366cc");
<ColorInput value={color} onChange={(c) => setColor(c.hex)} />;Pass value and you must handle onChange, or the panel will not move.
Everything else works the same way
mode, open, collapsed, size and recentColors all follow the same
pattern: pass the prop to control it, leave it out to let the panel manage it.
| Controlled | Uncontrolled | Change event |
|---|---|---|
value | defaultValue | onChange, onChangeComplete |
mode | defaultMode | onModeChange |
open | defaultOpen | onOpenChange |
collapsed | defaultCollapsed | onCollapsedChange |
size | defaultSize | onSizeChange |
recentColors | defaultRecentColors | onRecentColorsChange |
onChange vs onChangeComplete
onChange fires about 60 times a second while you drag. onChangeComplete
fires once, when you let go.
Use onChange for live preview, and onChangeComplete for anything that costs
something: saving, undo entries, network calls.
Do not put onChange into global state
It fires on every frame of a drag. Keep that state local, or save from
onChangeComplete instead.