This hook shares similarities with @container queries in css but has the capability to conditionally render components or map to component props in TypeScript.
Simply supply the hook with a set of widths to monitor (in pixels) and the hook will return boolean matches of the supplied values along with an active key that holds the current active width.
If you also need to monitor height values, upgrade to the useWidthHeight hook.
Sometimes it makes sense to adapt to different screen sizes by switching to a different component entirely rather than changing styles responsively.
The following demo shows a toggling sidebar that consumes the space next to a main content column. The main content column (on the right) contains adapting components that switch when they no longer have enough space to display an equivalent large component.
Set a custom throttle reporting time: