MuHelm

Mutations + Helmet => MuHelm It provides simple way of subscription to changes of HTML head to React components

Installation

Using npm

$ npm install muhelm --save-dev 

or yarn

$ yarn add muhelm

Basic usage

Most common case is when you need to subscribe to load event of styles and scripts declared in head, using MuHelm you can easily subscribe to this event and propagate needed data to your React component by passing properties into it, see following exanple

import {muhelmLoads} from 'muhelm';

muConnectLoads(StyledComponent, (node) => {
	if (node && node.id === 'styled-component-styles') {
		return {
			isStyledComponentStylesLoaded: true
		}
	}
}));

Get More Control

In case if you need more control you can use general mutation callback like in following example

import {muhelm} from 'muhelm';

muConnect(StyledComponent, (nodes) => {
  nodes.forEach((node) => {
    if (node.id === 'styled-component-styles') {
      node.addEventListener('load', () => {
        done({
          isStyledComponentStylesLoaded: true
        });
      });
    }
  });
});

API

muConnectLoads

Subscribes to load event of styles and scripts in head

• node - DOM Element that represents link or script tag in head
• Should return properties object or anything that can be cast as false. Properties will be passed through to wrapped component

muConnect

Subscribes to any mutation of the head

• nodes - Array of DOM elements that were mutated
• done - MuHelm callback. You need to pass properties object or anything that can be cast as false to callback. Properties will be passed through to wrapped component