useDimensionsRef

About

Easily grab dimensions of an element with a ref using this hook

Examples

import { useDimensionsRef } from "rooks";

export default function App() {
  const [ref, dimensions, node] = useDimensionsRef();

  return (
    <div className="App">
      <h1>useDimensionsRef example</h1>
      <div
        ref={ref}
        style={{
          border: "2px solid black",
          width: "200px",
          height: "200px",
        }}
      >
        dimensions.height: {dimensions?.height}px
        <br />
        dimensions.width: {dimensions?.width}px
      </div>
    </div>
  );
}

Open Sandbox

Arguments

Arguments	Type	Description	Default value
options	{ updateOnScroll?: boolean, updateOnResize?: boolean }	Whether to update dimension on window resize and scroll	{ updateOnScroll = true, updateOnResize = true }

Returns

Returns an array of 3 items:

Return item	Type	Description	Default value
ref	Callback ref	A callback ref function to be used as a ref for the element that needs to be tracked	undefined
dimensions	UseDimensionsRefReturn	An object with dimensions of the ref element	null
node	HTMLElement	The element being tracked by ref	null

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

❇️ State

🔥 Effects

⚛️ UI

✨ Misc

🚀 Events