redux-dom-mutation-observer 👀

redux-dom-mutation-observer is a Redux middleware for managing DOM tree changes over MutationObserver Web API.

This middleware uses actions to interact with a MutationObserver instance: observe mutations, disconnecting and receiving mutation records.

Features

• Written in TypeScript.
• Interact with a MutationObserver by dispatching actions.
• Handle mutation records with Redux middleware, integrate with Saga, and use reducers to persist state.

Installation

$ npm i redux-dom-mutation-observer

Configuration

Easily add the middleware to your Redux store with applyMiddleware. To do so, you have to create a middleware instance.

import { applyMiddleware, createStore } from 'redux';
import createMutationObserver from 'redux-dom-mutation-observer';

import reducer from './store/reducer';

// Create the middleware instance.
const mutationObserverMiddleware = createMutationObserver();

// Create the Redux store.
const store = createStore(reducer, applyMiddleware(mutationObserverMiddleware));

Usage

redux-dom-mutation-observer will dispatch every mutation record action automatically, based on what the internal MutationObserver will get. Some actions will need to be dispatched by you.

User dispatched actions

Feel free to use action creator functions included in the module.

REDUX_DOM_MUTATION_OBSERVER::OBSERVE

Action is used to start receiving DOM changes notifications that match the given target node and MutationObserverInit options.

Example:

import { observe } from 'redux-dom-mutation-observer';

store.dispatch(observe('root', { subtree: true }));

Arguments:

1. targetId (string): A DOM node Id within the DOM tree to watch for changes.
2. options (MutationObserverInit): configuration of a mutation observer.

REDUX_DOM_MUTATION_OBSERVER::DISCONNECT

Stops the MutationObserver instance from receiving further notifications.

Example:

import { disconnect } from 'redux-dom-mutation-observer';

store.dispatch(disconnect());

Middleware dispatched actions

REDUX_DOM_MUTATION_OBSERVER::MUTATION_RECORD

Dispatched when the MutationObserver receives a DOM change that qualifies given the targeted node or subtree and options. The payload includes a mutation key which is a MutationRecord.

Structure

{
    type: 'REDUX_DOM_MUTATION_OBSERVER::MUTATION_RECORD',
    payload: {
        mutation: {
            // MutationRecord data
        }
    };
}

Projects using redux-dom-mutation-observer

• workflowy-link-preview - URLs previewer browser extension for WorkFlowy.

Support

If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.

Also, you can drop me a message on my twitter - @roman_chukhan.

License

MIT