useDeviceKind

@sushindustries/ui

Which machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose.

5 min read
View as MarkdownEdit on GitHub

Signature

useDeviceKind(override?: DeviceKind): DeviceKind | null
ts

The machine the window's width currently selects, or null before mount.

Notes

Passing override is not the same as ignoring the return value - with an override, no matchMedia listener is attached at all, so a component that switches between "auto" and a forced device by toggling override on and off also switches between listening and not listening, with no leftover listener from the other mode.

There is no third state for "the environment cannot tell": null covers both "not mounted yet" and "no matchMedia available", because both cases call for the same fallback behaviour - use the narrowest machine's numbers, never assume laptop.

Used byDeviceDeviceA phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, whose screen is a real scroll container with real controls in it.@sushindustries/ui · layoutShowcaseShowcaseA component in a real iframe at every width it has to survive, side by side, with its source and install commands.@sushindustries/ui · docs