react-render-watch

Declaratively react to state transitions.

*state referring to any combination of React props, state, context, etc...

<Watch
  // The value to watch
  value={props.someValue}
  // test receives current and previous value
  test={(current, prev) => returnsBool(current, prev)}
  // action will be invoked anytime that test returns true
  action={(/* current, prev */) => doSomething()}
/>

API

prop	description
value	The value to watch
test	Function that returns boolean given test(current, prev)
action	Function to be invoked as action(current, prev) when test passes

Installation

Install via yarn or npm.

yarn add react-render-watch
// or
npm install --save react-render-watch

Usage

Importing Watch

react-render-watch has a single, named export:

// ES6 Modules
import {Watch} from 'react-render-watch';
// CommonJS
const Watch = require('react-render-watch').Watch;

// ...
// Use such as <Watch {...watchProps} />

Examples

Request new items when page changes (think pagination).

<Watch
  value={props.currentPage}
  test={(page, prevPage) => page !== prevPage}
  action={page => props.requestPageData(page)}
/>

Request data when search criteria changes (think advanced product filtering).

<Watch
  value={makeRequestParams(this.props)}
  test={(params, prevParams) => !_.isEqual(params, prevParams)}
  action={params => requestDataWithParams(params)}
/>

React to state changes without requiring a class component for lifecyle methods.

function SomeComponent({text, setText, dangerFlag, setDangerFlag}) {
  return (
    <div>
      <p>Raise the danger flag once input length reaches 5</p>
      <input value={text} onChange={({target: {value}}) => setText(value)} />
      {dangerFlag && (
        <button onClick={() => setDangerFlag(false)}>
          Danger! (click to dismiss)
        </button>
      )}
      <Watch
        value={text}
        test={({length}, previous) => previous.length < 5 && length === 5}
        action={() => setDangerFlag(true)}
      />
    </div>
  );
}