Experimental utils, to get more from React-Dom
This library uses details of the internal React-Dom realization. Be careful.
React tree is where your Application lives, but DOM tree is where it is actually exists.
React.Portals are breaking connections between React and DOM, and while events
would be automatically managed
by React - everything else would not.
Sometimes you need it - get some react information out of dom tree. Get React instance from a Dom Node.
It always was a right decision to keep Components in isolation, and not let them assess their parents. But it still could be useful in some cases.
The goal is to keep API not simple, but less fragile, to prevent potential breakages in the future.
Returns if DomNode
is contained inside Component
.
Returns if targetNode
is contained inside hostNode
. This is the same as Dom API node.contains(anotherNode)
Returns all portals within
Returns all direct children of component
Returns fiber(wrapped) for a node
class MyComponent extends React.Component {
componentDidMount() {
document.body.addEventListener(
'click',
event => {
if (instanceContainsNode(this, event.target)) {
console.log('this event is somewhere inside me')
}
}
)
}
render(){
return (
<React.Fragment>
<div> local div </div>
<Portal> portaled content </div>
</React.Fragment>
)
}
}
MIT