react-mutation-observer
v1.1.0
Published
React wrapper for mutation observers.
Downloads
3,832
Readme
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