realar

Realar ^βeta

Reactive state manager for React.

Imperative, Light, Fast and Pretty looked :kissing_heart:

Usage

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

const Todos = unit({
  todos: [],
  async fetch() {
    const { data } = await axios.get("/api/todos");
    this.todos = data;
  },
  constructor() {
    this.fetch();
  },
  // get completed() {
  //   return this.todos.filter(task => task.completed);
  // },
});

const App = () => {
  const { todos, fetch } = useOwn(Todos);

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

Documentation

• Realar understanding

Installation

npm i -P realar
# or
yarn add realar

And update your babel config:

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

Enjoy!

Demo

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