Skip to content

React component that provides a div element for embedding non-React things into, that tells you when it's mounted, unmounted or resized

License

Notifications You must be signed in to change notification settings

mesmotronic/react-observable-div

Repository files navigation

ObservableDiv for React

This library provides a React component that creates a <div> element for embedding non-React things into, that dispatches events when it's mounted, unmounted or resized.

<ObservableDiv
  onMount={(domElement) => console.log("Mounted", domElement)}
  onUnmount={() => console.log("Unmounted")}
  onResize={({ width, height }) =>
    console.log(`Resized to ${width} x ${height}`)
  }
>
  {/* You can optionally put content here */}
</ObservableDiv>

This component provides the ideal host for things like a Three.js canvas, for example.

Strict mode

Please keep in mind that React's <StrictMode> may cause this component to dispatch the mount event twice in development. This is a know issue with <StrictMode> that affects all components and should be managed appropriately.

About

React component that provides a div element for embedding non-React things into, that tells you when it's mounted, unmounted or resized

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published