Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jurca/react-dom-observe
Utility for observing the lifecycle of DOM elements through React refs.
https://github.com/jurca/react-dom-observe
Last synced: 6 days ago
JSON representation
Utility for observing the lifecycle of DOM elements through React refs.
- Host: GitHub
- URL: https://github.com/jurca/react-dom-observe
- Owner: jurca
- License: isc
- Created: 2017-04-08T09:19:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T10:10:46.000Z (over 5 years ago)
- Last Synced: 2024-04-14T10:08:53.681Z (7 months ago)
- Language: TypeScript
- Size: 229 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/jurca/react-dom-observe)
# react-dom-observe
Utility for easier monitoring of the lifecycle of React-created DOM elements
(and component instances) through references (`ref` callbacks).
## Installation
You can add the `react-dom-observe` to your project using npm:
```
npm i --save @jurca/react-dom-observe
```
## Usage
The library is designed to be used in ES2016 environment. Make sure you have
proper polyfills included in your project if you need backwards compatibility.
To require library in ES2015 import, use a regular import of the default module
export:
```javascript
import observe from '@jurca/react-dom-observe'
```
To require the library in a CommonJS environment, use the following pattern:
```javascript
const observe = require('@jurca/react-dom-observe').default
```
### Usage in components
The `react-dom-observe` library allows for, for example, easier registration
and deregistration of event listeners on DOM elements, without having to keep
references to the elements:
```javascript
class Component extends React.Component {
constructor(props) {
super(props)
this._onFooBar = this.onFooBar.bind(this)
}
render() {
return (
A FooBar component content
)
}
onRootMounted(root) {
root.addEventListener('fooBar', this._onFooBar)
}
onRootUnmounted(root) {
root.removeEventListener('fooBar', this._onFooBar)
}
onFooBarMounted(fooBarInstance) {
fooBarInstance.baz()
}
onFooBar(event) {
// The fooBar event occurred
}
}
```
The third argument (the element unmount callback) is optional. Alternatively,
if you only need to be notified about the component being unmounted, set the
mount callback to `null` and provide the unmount callback as the third
argument:
```javascript
class Foo extends React.Component {
render() {
return (
A Foo component
)
}
onRootUnmounted(root) {
// root is the div element at the component's root that has just been
// removed from the DOM
}
}
```
In case you are referring to a component, but need the component's root element
instead, you may set the fourth argument to `true` to resolve the component's
instance to its DOM node (this is done using the `ReactDOM.findDOMNode()` API).
Note that this pierces the component abstraction, and there is most likely a
better way to what you are trying to accomplish (see
[the React documentation](https://facebook.github.io/react/docs/react-dom.html#finddomnode)
for more info).
```javascript
class Foo extends React.Component {
render() {
return (
)
}
onDidMount(fooBarRootElement) {
// do something
}
onDidUnmount(fooBarRootElement) {
// do something
}
}
```
### Usage in functional components
There is also a shorthand available for use in functional React components.
This shorthand skips the first (`this` context) argument:
```javascript
import observe from '@jurca/react-dom-observe/unbound'
const FooBar = props => {
const onMounted = root => {
// do something with the root
}
const onUnmounted = root => {
// undo what has been done in the onMounted callback
}
return (
A FooBar component
)
}
```