Skip to content

useImageMode

@astryxdesign/core v0.7.1 · useImageMode

Parameters ​

NameTypeDefaultDescription
srcMaybeRefOrGetter<string | null | undefined>—Image source URL to analyze. A plain string, a ref, or a getter. When null or undefined, the result is the fallback value. Required.
optionsMaybeRefOrGetter<UseImageModeOptions>{}Optional configuration for the analysis. Read on each run, so a getter keeps it current.
options.regionImageSampleRegionwhole imageRegion to sample within the image, using normalized 0-1 coordinates { x, y, width, height }.
options.thresholdnumber0.5Luminance threshold for the dark/light split. Below is dark, above is light.
options.fallback'dark' | 'light' | nullnullValue returned while loading or on error.

Returns ​

NameTypeDescription
modeRef<'dark' | 'light' | null>Detected luminance mode of the image. Returns null while loading, or the fallback when src is null or undefined.

The two pieces of the analysis are exported too: perceptualLightness(r, g, b) returns the APCA lightness of one color, and imageModeFromPixels(pixels, threshold) averages an RGBA buffer into 'dark' or 'light'.