realar

Realar

Reactive state manager for React based on reactive-box.

Light, Fast, and Pretty looked :kissing_heart:

Usage

import React from 'react';
import { box, shared } from 'realar';

class Counter {
  @box value = 0;

  increment = () => this.value += 1;
  decrement = () => this.value -= 1;
}

const sharedCounter = () => shared(Counter);

const App = () => {
  const { value, increment, decrement } = sharedCounter();
  return (
    <p>
      Counter: {value}
      <br />
      <button onClick={decrement}>Prev</button>
      <button onClick={increment}>Next</button>
    </p>
  );
};

If you no have possibilities for using realar babel plugin, your code will be not so beautiful look like, because otherwise necessary to wrap all React function components that use reactive values inside to observe wrapper.

See wrapped version on CodeSandbox.

Demos

• Hello - shared state demonstration.
• Todos - todomvc implementation.
• Jest - unit test example.

Installation

npm install realar
# or
yarn add realar

And update your babel config if you want to use babel plugin for automatic observation for arrow function components.

Enjoy and happy coding!