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, sel, shared } from 'realar';

class Counter {
  @box value = 0;

  @sel get next() {
    return this.value + 1;
  }

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

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

const App = () => {
  const { value, next, increment, decrement } = sharedCounter();

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

Installation

npm install --save realar
# or
yarn add realar

And update your babel config if your want to use babel-plugin for automatic decorated arrow function components:

// .babelrc
{
  "plugins": [
    "realar/babel"
  ]
}

Enjoy and happy coding!