RecolorizationPreview

The Recolorization Preview component displays a live recolorization preview of an item's image.

name	type	required	comment
`hueOffset`	`number`	yes	Offset, in degrees, to move the hue around the hue wheel. `0` for no change.
`lightnessMultiplier`	`number`	yes	Amount by which to multiply the lightness. `1` for no change.
`saturationMultiplier`	`number`	yes	Amount by which to multiply the saturation. `1` for no change.
`show`	`boolean`	yes	Hide the preview.
`url`	`string`	yes	URL pointing to the unmodified image.
`maxPreviewSize`	`number`	no	Max size in any dimension for the image. Useful to reduce processing time on larger images. Default value: `4096`
`onImageLoad`	`() => void`	no

Result

Live Editor

function RecolorizationPreviewDemo() {
    const [hue, setHue] = useState(100);

    return (
        <div style={{ maxWidth: 500 }}>
            Hue: <input type="range" min={0} max={360} onChange={(e) => setHue(+e.target.value)} value={hue} />
            <RecolorizationPreview
                url="https://placekitten.com/1000/1000"
                hueOffset={hue}
                saturationMultiplier={1.5}
                lightnessMultiplier={1.1}
                maxPreviewSize={1024}
                show
            />
        </div>
    );
}

function RecolorizationPreviewDemo() {
    const [hue, setHue] = useState(100);

    return (
        <div style={{ maxWidth: 500 }}>
            Hue: <input type="range" min={0} max={360} onChange={(e) => setHue(+e.target.value)} value={hue} />
            <RecolorizationPreview
                url="https://placekitten.com/1000/1000"
                hueOffset={hue}
                saturationMultiplier={1.5}
                lightnessMultiplier={1.1}
                maxPreviewSize={1024}
                show
            />
        </div>
    );
}