realar-project / realar

5 kB Advanced state manager for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

low: make an article about the powerful data flow

betula opened this issue · comments

import React from "react";
import { value, useLocal, useValue } from "realar";

const Logic = () => {
  const name = value("Joe");
  const inputHandler = name.pre((ev: React.ChangeEvent<HTMLInputElement>) => (
    ev.currentTarget.value
  ));

  return {
    name,
    inputHandler
  }
};


const Form = () => {
  const logic = useLocal(Logic);
  const name = useValue(logic.name);
  
  return (
    <>
      <h1>Hello {name}!</h1>
      <p>
        Name: 
        <input 
          type="text" 
          value={name}
          onChange={logic.inputHandler} />
      </p>
    </>
  );
};

const App = () => (
  <Form />
);

export default App;

Try on CodeSandbox

Example of some api method documentation. Looks like pretty)
https://github.com/shastajs/shasta/blob/master/docs/Store/createStore.md