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