HooksFree

useDensity

Reads and changes the density of the nearest DensityProvider.

Density sets the size of controls, fields and rows: (the default, controls 32–48 px) or (36–56 px). returns the density the nearest applies and a setter for it, so a settings page can offer the switch.

Import

tsx

import { useDensity } from "@wunderui/react"

Part of WunderUI Free, in the npm package and the free source.

Signature

ts

useDensity(): DensityContextValue

Returns

Field	Type
densityThe density the provider applies.	DensityValue
setDensityChanges the density (and stores it when the provider persists).	(value: DensityValue) => void

Examples

A density setting

tsx

import { DensityProvider, Label, Switch, useDensity } from "@wunderui/react"

function DensitySetting() {
  const { density, setDensity } = useDensity()
  return (
    <Label className="flex items-center gap-3">
      <Switch checked={density === "comfortable"} onCheckedChange={(on) => setDensity(on ? "comfortable" : "compact")} />
      Comfortable spacing
    </Label>
  )
}

export function App({ children }: { children: React.ReactNode }) {
  return <DensityProvider storageKey="wui-density">{children}</DensityProvider>
}

Notes

Outside a it returns and a setter that does nothing.
The provider sets on , so portals such as menus and dialogs follow it. For one region only, wrap it in instead.
With a on the provider the choice is kept in localStorage. Add to the document head, so a stored paints before the first frame.
Switching density changes the layout without animation: the provider pauses transitions for one frame.

PrevioususeDataTableUrlState NextuseInViewAppear