useImageColorAdjustmentControls

The useImageColorAdjustmentControls hook provides functionality for editing the HSL color adjustments of an image. It will potentially return a few different objects to allow for guarding against the current status of the controls before using the controls themselves.

name	type	required	comment
HSL	HSL	yes	An object containing the current HSL adjustment values for the selected image
isEnabled	true	yes	Boolean value for whether the color adjustment controls are currently enabled from an image item being selected. The HSL, setHSL and onCommit properties will only be present if this value is true and status === 'ready'
onCommit	() => void	yes
setHSL	(hsl: Partial<HSL>) => void	yes
status	"ready"	yes	A string representing the async readiness status of the image's color controls. Will be 'loading' initially, 'failed' in the case of an error, and 'ready' after an image's dominant colors have been successfully calculated and HSL values can be changed.

// This hook should be used within a MobX `observer` Higher Order Component.
const ColorAdjustmentControls = observer(() => {
    const colorControls = useImageColorAdjustmentControls();

    // Make sure the controls are enabled and ready before we try to use them
    if (!colorControls.isEnabled || colorControls.status !== 'ready') {
        return <div>Select an image to change its color adjustments</div>;
    }

    const { onCommit, setHSL, HSL } = colorControls;

    function handleChangeHSL(e: React.ChangeEvent<HTMLInputElement>) {
        // We'll use the HTML name attribute as a key to simplify setting each individual HSL value
        const { name, value } = e.target;
        setHSL({ [name]: value });
    }

    return (
        <div>
            <input type="range" max="360" name="h" value={HSL.h} onChange={handleChangeHSL} />
            <input type="range" max="1" step={0.01} name="l" value={HSL.l} onChange={handleChangeHSL} />
            <input type="range" max="1" step={0.01} name="s" value={HSL.s} onChange={handleChangeHSL} />
            {`${HSL.h}, ${HSL.s}, ${HSL.l}`}
            <button onClick={onCommit}>Commit Color Adjustment</button>
        </div>
    );
});