awareness-hoc v0.2.2

awareness WIP

React to DOM changes outside of React.

An HOC that allows a component to be aware of another node in the DOM.

The wrapped component will re-render on any changes to the observed node.

Usage

import withAwareness from './awareness';

const AwareComponent = withAwareness(Component, {
  awareOf: Node,
  value: (Node) => Any // eg. node.textContent
});

Example

This example is expected to be rendered into a Twitter timeline.

It would play an animation when the tweet reaches 100 likes.

import React, { Component } from 'react';
import { SomeAnimation } from './one/of/your/animations';
import withAwareness from './awareness';

const TweetAnimation = (props) => {
  // likeCounter.textContent available as props.awareness
  const likesCount = props.awareness;
  if (parseInt(likesCount) > 100) {
    return <SomeAnimation/>;
  } else {
    return <div>{likesCount}</div>;
  }
}

const likeCounter = document.querySelector(/* ... */); // The like count on Twitter (outside this app)
const AwareTweetAnimation = withAwareness(TweetAnimation, {
  awareOf: likeCounter,
  value: node => node.textContent
});

Run tests

yarn test

License

MIT