1.1.0 • Published 7 years ago

react-mutation-observer v1.1.0

Weekly downloads
3,683
License
MIT
Repository
github
Last release
7 years ago

react-mutation-observer

Downloads Downloads NPM Version Dependencies Dev Dependencies License

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