realar

Realar

Reactive state manager for React based on reactive-box.

Light, Fast, and Pretty looked :kissing_heart:

Realar targeted to clean code, minimal abstraction, minimal additional functions, modulable architecture, and time of delivery user experience.

Start!

You can start development with knows only two functions:

prop. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh.

shared. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code.

Usage

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

class Counter {
  @prop value = 0;

  inc = () => this.value += 1;
  dec = () => this.value -= 1;
}

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

const Count = () => {
  const { value } = sharedCounter();
  return <p>{value}</p>;
};

const Buttons = () => {
  const { inc, dec } = sharedCounter();
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;

For best possibilities use realar babel plugin, your code will be so beautiful to look like.

But otherwise necessary to wrap all React function components that use reactive values inside to observe wrapper. See wrapped version on CodeSandbox.

Documentation

• Intro - story about box, on.

Documentation not ready yet for action, cache, on, sync, cycle, effect, shared, initial, mock, unmock, free, useLocal, observe, useValue, useShared, transaction, box, sel functions. It's coming soon.

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 for support decorators and using babel plugin for automatic observation arrow function components.

//.babelrc
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["realar", {
      "include": [
        "src/components/*",
        "src/pages/*"
      ]
    }]
  ]
}

Enjoy and happy coding!