You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-dom-resize-observer

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dom-resize-observer

React hook implementing the Resize Observer API.

1.0.0
latest
npmnpm
Version published
Weekly downloads
22
Maintainers
1
Weekly downloads
 
Created
Source

React Resize Observer

Hook to provide a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.

codecov

Workflow

Installation

$ npm install react-dom-resize-observer

Examples

export function App() {
  const {
      // New dimensions when resize is observed.
      entry, 
      // Callback to pass as a ref to give this hook access to the DOM element.
      observer, 
      // Callback to disconnect observing completely.
      disconnect,
      // Callback to unobserve a specific element.
      unobserve 
    } =
    // Pass the same DOM element type as a type param to help the hook infer the correct types.
    useResizeObserver<HTMLDivElement | null>({
      // You can optionally pass your own ref if you already have one.
      elementRef: ref,
      // You can optionally pass a callback to access the raw DOM element on resize.
      onResize: (el) => { /** Access the element on resize... */ },
    });


  return (
    // Attach the observer as a ref to the DOM. 
    <div ref={observer} onClick={disconnect}>
      App
    </div>
  )
}

FAQs

Package last updated on 08 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts