Numerous Pancakes Munched

    simple-resize-observer-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    ResizeObserver Hook for React

    The purpose of the hook is to make using ResizeObserver simpler with React.

    Install

    npm install --save simple-resize-observer-hook

    API

    function MyComponent() {
        const ref = useRef(null);
        // current is the ref object.
        // entries is an array of ResizeObserverEntry objects.
        const {current, entries} = useResizeObserver(ref);
        const [width, setWidth] = useState(10);
        const offsetWidth = current ? current.offsetWidth : 0;
        console.log(offsetWidth, entries)
        return <>
            <input style={{width: `${width}px`}} type="text" value="This is being observed" ref={ref}/>
            <br/>
            <button onClick={() => setWidth(width + 10)}>Add Width</button>
            <p>The offsetWidth is {offsetWidth}</p>
        </>
    }

    You need to pass a ref object as an argument to the hook. The ref is the object that is being observed.

    The hook returns an object that has two properties:

    current

    The React ref object.

    entries

    An array of ResizeObserverEntry objects.

    Install

    npm i simple-resize-observer-hook

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    6.09 kB

    Total Files

    9

    Last publish

    Collaborators

    • jtulkki