realar

Realar ^βeta

Reactive state manager for React.

Light, Fast, and Pretty looked :kissing_heart:

Usage

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

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

const App = () => {
  // Use the own instance of Todos
  const { todos, fetch } = useOwn(Todos);

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

Documentation

• Basic understanding

Demos

• Hello - shared state demonstration.
• Todos - todomvc implementation.

Installation

npm i -P realar
# or
yarn add realar

And update your babel config:

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

Enjoy!