Nanobots Producing Megastructures

    @shubhaemk/use-element-resize
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    use-element-resize

    A small hook to check dimension of a DOM ELement or Window when a browser window is resized.

    Playground 🏃

    Coming Soon!

    Install 💾

    Using npm

    $ npm install @shubhaemk/use-element-resize

    Using yarn

    $ yarn add @shubhaemk/use-element-resize

    Features

    • Get Height and Width of a DOM Element when browser window is resized.
    • Execute a function when browser window is resized. (Do not use it to set Height and Width of element in state, use useEffect hook instead till it gets option to be throttled)
    • Server Side Rendering support. (Needs to be tested)
    • Throttling of Callback function. (Comming Soon!)

    Usage 🔥

    const [height, width] = useElementResize(ref, callback);
    • height (Default: undefined): Height of given Element reference or window in px, undefined till Element is completely painted.
    • width (Default: undefined): Width if given Element reference or window in px, undefined till Element is completely painted.
    • ref (Default: window): Ref of element to whose height and width are required after window resize.
    • callback: Callback function to be executed after each window resize. (Throttling comming soon)

    Example 💻

    import { useRef } from "react";
    import useElementResize from "use-element-resize";
    
    const ElementSizeExample = () => {
      const ElementRef = useRef();
    
      // height and width of browser window
      const [windowHeight, windowWidth] = useElementResize();
    
      // height and width of browser window with execution of a callback
      const [windowHeightCallback, windowWidthCallback] = useElementResize(
        null,
        () => {
          console.log("Browser Window is getting resized");
        }
      );
    
      // height and width of DOM Element reffered by ElementRef
      const [elementHeight, elementWidth] = useElementResize(ElementRef);
    
      // height and width of DOM Element reffered by ElementRef with execution of a callback
      const [elementHeightCallback, elementWidthCallback] = useElementResize(
        ElementRef,
        () => {
          console.log("Element is getting resized");
        }
      );
    
      return <div style={{ width: "100%", height: "50px" }} ref={ElementRef}></div>;
    };

    Features Comming soon 👀

    • Throttling of callback function.
    • TypeScript implementation

    Referrences 📝

    Like it? Give this repo a

    Install

    npm i @shubhaemk/use-element-resize

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    7.96 kB

    Total Files

    6

    Last publish

    Collaborators

    • shubhaemk