Just like the useWidth hook, this hook shares similarities with @container queries in css but also has the capability to conditionally render components or map to component props in TypeScript.
Simply supply the hook with a set of widths and heights 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.
Set a custom throttle reporting time:
Rather than using the produced ref, you can pass in an existing ref:
If you’re using the same config each time (eg: useWidthHeight(same_config?)) then you can set a default one like this:
Usage example: