react-mutation-observer

React wrapper for mutation observers.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-mutation-observer
3411.1.05 years ago6 years agoMinified + gzip package size for react-mutation-observer in KB

Readme

react-mutation-observer
!Downloadsnpm-dmpackage-url !Downloadsnpm-dtpackage-url !NPM Versionnpm-vpackage-url !Dependenciesdepspackage-url !Dev Dependenciesdev-depspackage-url !Licenselicensepackage-url
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: CHILDREMOVED || CHILDADDED ```javascript
{
  target,
  previousSibling,
  nextSibling,
  wrappedNode,
  child
}
``` - Type: ATTRIBUTES ```javascript
{
  from,
  to,
  name,
  namespace,
  target
}
``` - Type: CHARACTERDATA ```javascript
{
  from,
  to,
  target
}
```

License

MIT