realar-project / realar

5 kB Advanced state manager for React
MIT License
45 stars 0 forks source link

low: make an article about the powerful data flow #47

Open betula opened 3 years ago

betula commented 3 years ago
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

betula commented 3 years ago

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