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 , attributeList : PropTypes . arrayOf ( PropTypes . string ) , subtree : PropTypes . bool , suppressAttributeOldValue : PropTypes . bool , suppressCharacterDataOldValue : PropTypes . bool , onMutation : PropTypes . func . isRequired }

The different categories and mutation types are available as exports as well;

import { ALL_CATEGORIES , CHILD_LIST , CHILD_REMOVED , CHILD_ADDED , ATTRIBUTES , CHARACTER_DATA } 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