useDeviceKind
@sushindustries/uiWhich machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose.
DeviceDeviceA 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 · layout renders every machine and lets media queries choose. This is for the code that has to say which one won.
tanstacktanstack add https://adamjurek.com/r/tanstack/use-device-kind.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/use-device-kind.jsonconst kind = useDeviceKind(); // "phone" | "tablet" | "laptop" | nullNull is the answer, not a gap
It returns null until the first effect runs, and never guesses.
A default of "laptop" would be a claim the server cannot support. Every
caller would then have one render where the value is confidently wrong, and the
callers here are things like "tell the model which machine the reader is
using" - where confidently wrong is worse than absent by a wide margin.
Being null costs nothing in practice, because everything that needs this
needs it after a click.
Do not use this to pick what to render
That is the mistake this whole design exists to avoid. A tree chosen from
this hook renders nothing on the server and the wrong thing on the first
client frame. If the decision is visual, it belongs in the stylesheet -
data-device, or a media query from devices.md.
Install
tanstack add https://adamjurek.com/r/tanstack/use-device-kind.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/use-device-kind.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | layout · Scenes |
| Files | use-device-kind.ts, device-kinds.ts |
| Dependencies | None |
| Also installs | deviceDeviceA 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 · layout |
| Tags | responsive, media-query, ssr, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.