react-livebox

React Live Box

Installation

npm

npm i react-livebox

yarn

yarn add react-livebox

Usages

Counter app

import { refresh, box } from 'react-livebox';

let count = 0;
let factor = 1;

const changeCount = () => {
  // update value
  count++;
  // refresh all boxes that have `count` tag
  refresh('count');
};

const changeFactor = () => {
  factor++;
  // refresh all boxes that have `factor` tag
  refresh('factor');
};

const changeCountAndFactor = () => {
  // change both count and factor values then refresh all boxes that have `factor` or `count` tag
  count++;
  factor++;
  refresh('count', 'factor');
};

const App = () => {
  return (
    <>
      <h1>Count: {box('count', () => count)}</h1>
      <h1>Factor: {box('factor', () => factor)}</h1>
      <h1>
        {
          // render a box has `count` and `factor` tags
          box(['count', 'factor'], () => count * factor)
        }
      </h1>
      <button onClick={changeCount}>Change count</button>
      <button onClick={changeFactor}>Change factor</button>
      <button onClick={changeCountAndFactor}>Change count and factor</button>
    </>
  );
};

Advanced Usages

API References

box()

refresh()