1.1.0 • Published 7 years ago
react-mutation-observer v1.1.0
react-mutation-observer
React wrapper for mutation observers.
Based on MutationObserver.
Getting Started
Install it via npm:
npm install --save react-mutation-observer
Install it via yarn:
yarn add react-mutation-observer
Examples
Basic usage
import MutationObserver from 'react-mutation-observer';
<MutationObserver
onContentChange={console.log.bind(null, 'Change content triggered.')}
onAttributeChange={console.log.bind(null, 'Change attribute triggered.')}
onChildRemoval={console.log.bind(null, 'Child removal triggered.')}
onChildAddition={console.log.bind(null, 'Child addition triggered.')}
>
<div className="App-intro" data-edit="EDIT ME">
REMOVE ME
<b>EDIT ME</b>
</div>
</MutationObserver>
Triggered if the the specific element is removed
import { WatchForRemoval } from 'react-mutation-observer';
<WatchForRemoval
onRemoval={console.log.bind(null, 'Child removal triggered.')}
>
<div className="App-intro" data-edit="EDIT ME">
Remove the whole div
</div>
</WatchForRemoval>
Only watch for children being added or removed
import { WatchChildren, WatchForChildrenRemoval, WatchForChildrenAddition } from 'react-mutation-observer';
<WatchChildren
onRemoval={console.log.bind(null, 'Child removal triggered.')}
onAddtion={console.log.bind(null, 'Child addition triggered.')}
>
<div className="App-intro">
<b>REMOVE b tag</b>
</div>
</WatchChildren>
<WatchForChildrenRemoval
onRemoval={console.log.bind(null, 'Child removal triggered.')}
>
<div className="App-intro">
<b>REMOVE b tag</b>
</div>
</WatchForChildrenRemoval>
<WatchForChildrenAddition
onAddtion={console.log.bind(null, 'Child addition triggered.')}
>
<div className="App-intro">
<b>REMOVE b tag</b>
</div>
</WatchForChildrenAddition>
Only watch content changes
import { WatchContent } from 'react-mutation-observer';
<WatchContent
onChange={console.log.bind(null, 'Content change triggered.')}
>
<div className="App-intro">
Edit Me
</div>
</WatchContent>
Only watch attribute changes
import { WatchAttributes } from 'react-mutation-observer';
<WatchAttributes
onChange={console.log.bind(null, 'Attribute change triggered.')}
>
<div className="App-intro EditMe" data-thing="Or Edit Me">
Some Text
</div>
</WatchAttributes>
Need More control? use the wrapper
import { withObserver } from 'react-mutation-observer';
return withObserver(Component);
Props
{
observedComponent: PropTypes.func,
categories: PropTypes.oneOfType([
PropTypes.oneOf([
CHILD_LIST,
ATTRIBUTES,
CHARACTER_DATA,
ALL_CATEGORIES
]),
PropTypes.arrayOf(PropTypes.oneOf([
CHILD_LIST,
ATTRIBUTES,
CHARACTER_DATA,
ALL_CATEGORIES
]))
]).isRequired, // defaults to CHILD_LIST
attributeList: PropTypes.arrayOf(PropTypes.string),
subtree: PropTypes.bool, // defaults to false
suppressAttributeOldValue: PropTypes.bool, // defaults to false
suppressCharacterDataOldValue: PropTypes.bool, // defaults to false
onMutation: PropTypes.func.isRequired
}
The different categories and mutation types are available as exports as well;
import {
ALL_CATEGORIES, // Sets the observer to watch all available changes
CHILD_LIST, // Sets the observer to watch additions and removals of children
CHILD_REMOVED, // Mutation type passed when a child is removed
CHILD_ADDED, // Mutation type passed when a child is added
ATTRIBUTES, // Mutation type passed when an attribute is changed and is used to set the observer to watch changes to attributes
CHARACTER_DATA // Mutation type passed when content is changed and is used to set the observer to watch changes to content. Typically needs to be used with `subtree={true}`
} from 'react-mutation-observer';
onMutation
handleMutation(type, payload) {
}
onMutation Payload Structures
- Type: CHILD_REMOVED || CHILD_ADDED
{ target, previousSibling, nextSibling, wrappedNode, child }
- Type: ATTRIBUTES
{ from, to, name, namespace, target }
- Type: CHARACTER_DATA
{ from, to, target }
License
MIT
1.1.0
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.0.0-rc23
7 years ago
0.0.0-rc22
7 years ago
0.0.0-rc21
7 years ago
0.0.0-rc20
7 years ago
0.0.0-rc19
7 years ago
0.0.0-rc18
7 years ago
0.0.0-rc17
7 years ago
0.0.0-rc16
7 years ago
0.0.0-rc15
7 years ago
0.0.0-rc14
7 years ago
0.0.0-rc13
7 years ago
0.0.0-rc12
7 years ago
0.0.0-rc11
7 years ago
0.0.0-rc10
7 years ago
0.0.0-rc9
7 years ago
0.0.0-rc8
7 years ago
0.0.0-rc7
7 years ago
0.0.0-rc6
7 years ago
0.0.0-rc5
7 years ago
0.0.0-rc4
7 years ago
0.0.0-rc3
7 years ago
0.0.0-rc2
7 years ago
0.0.0-rc1
7 years ago