https://github.com/mesmotronic/react-observable-div

React component that provides a div element for embedding non-React things into, that tells you when it's mounted, unmounted or resized
https://github.com/mesmotronic/react-observable-div

div mount observable react resize threejs unmount

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mesmotronic/react-observable-div
• Owner: mesmotronic
• License: bsd-3-clause
• Created: 2025-02-14T21:10:25.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-18T11:22:27.000Z (over 1 year ago)
• Last Synced: 2025-03-25T20:04:16.750Z (about 1 year ago)
• Topics: div, mount, observable, react, resize, threejs, unmount
• Language: TypeScript
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ObservableDiv for React

This library provides a React component that creates a `
` element for

embedding non-React things into, that dispatches events when it's mounted,

unmounted or resized.


```ts

 console.log("Mounted", domElement)}

  onUnmount={() => console.log("Unmounted")}

  onResize={({ width, height }) =>

    console.log(`Resized to ${width} x ${height}`)

  }

>

  {/* You can optionally put content here */}

```

This component provides the ideal host for things like a [Three.js](https://threejs.org)

canvas, for example.

## Strict mode

Please keep in mind that React's `` may cause this component to

dispatch the mount event twice in development. This is a know issue with

`` that affects all components and should be managed appropriately.