realar

Realar

Reactive state manager for React.

Usage

import React from "react";
import { unit, useUnit } from "realar";
import axios from "axios";

const TodosUnit = unit({
  todos: [],
  async fetch() {
    const { data } = await axios.get("/api/todos");
    this.todos = data;
  },
  constructor() {
    this.fetch();
  }
});

const App = () => {
  const { todos, fetch } = useUnit(TodosUnit);

  if (fetch.pending) {
    return (
      <div>Loading</div>
    )
  }
  return (
    <ul>{todos.map((todo) => <li>{todo.text}</li>)}</ul>
  );
};

Slides

• Realar understanding

Installation

npm i -P realar
# or
yarn add realar

Update your babel config:

// .babelrc.js
module.exports = {
  "plugins": [
    "realar/babel"
  ]
}

And to wrap your react-dom render code, to realar ready function:

import React from "react";
import { render } from "react-dom";
import { ready } from "realar";
import { App } from "./app";

ready(() => render(<App />, document.getElementById("root")));

Enjoy!

Demo

git clone [e-mail]:betula/realar.git
cd realar
npm run start
# Open http://localhost:1210 in your browser