updated example project

Author: DaniAkash

rex-example/src/App.tsx

@@ -1,43 +1,40 @@
-import React, { useState } from "react";
-import store from "./store/store";
-
-const { useRex } = store;
+import React from "react";
+import { useFormFieldStore } from "./store/useFormField";
 
 export default function App() {
-  const store = useRex();
-  const { todos } = store;
-
-  const [newTask, updateNewTask] = useState("");
-
-  const onAddTask = () => {
-    todos.addTask(newTask);
-    updateNewTask("");
-  };
-
+  const {
+    values,
+    updateName,
+    updateEmail,
+    updateAge,
+    updatePhone
+  } = useFormFieldStore();
   return (
     <div>
       <input
         type="text"
-        value={newTask}
-        onChange={event => updateNewTask(event.target.value)}
-        placeholder="New Task"
+        value={values.name}
+        onChange={e => updateName(e.target.value)}
+        placeholder="Name"
+      />
+      <input
+        type="text"
+        value={values.email}
+        onChange={e => updateEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <input
+        type="text"
+        value={values.phone || ""}
+        onChange={e => updatePhone(e.target.value)}
+        placeholder="Phone"
+      />
+      <input
+        type="number"
+        value={values.age || ""}
+        onChange={e => updateAge(parseInt(e.target.value))}
+        placeholder="Age"
       />
-      <button onClick={onAddTask}>Submit</button>
-      <ul>
-        {todos.list.map((item, itemIndex) => {
-          const onClickCheckbox = () => todos.toggleTask(itemIndex);
-          return (
-            <li key={itemIndex}>
-              <input
-                type="checkbox"
-                onChange={onClickCheckbox}
-                checked={item.status}
-              />
-              {item.task}
-            </li>
-          );
-        })}
-      </ul>
     </div>
   );
 }

rex-example/src/SimpleApp.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import useRex from "rex-state";
+
+const useInput = () => {
+  const [state, setState] = useRex({ value: "" });
+
+  return {
+    get value() {
+      return state.value;
+    },
+    updateValue(value: string) {
+      setState({ value });
+    }
+  };
+};
+
+const SimpleApp = () => {
+  const { value, updateValue } = useInput();
+
+  return (
+    <input
+      type="text"
+      value={value}
+      placeholder="Add Text here..."
+      onChange={event => updateValue(event.target.value)}
+    />
+  );
+};
+
+export default SimpleApp;

rex-example/src/index.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import store from "./store/store";
 import App from "./App";
+import { FormFieldProvider } from "./store/useFormField";
 
-const { RexProvider } = store;
+// import SimpleApp from "./SimpleApp";
+
+// ReactDOM.render(<SimpleApp />, document.getElementById("app-root"));
 
 ReactDOM.render(
-  <RexProvider>
+  <FormFieldProvider>
     <App />
-  </RexProvider>,
+  </FormFieldProvider>,
   document.getElementById("app-root")
 );

rex-example/src/store/Todos.ts

@@ -0,0 +1,44 @@
+import useRex, { createRexStore } from "rex-state";
+
+type formFields = {
+  name: string;
+  email: string;
+  gender?: "male" | "female";
+  phone?: string;
+  age?: number;
+};
+
+const useFormField = () => {
+  const defaultState: formFields = {
+    name: "",
+    email: ""
+  };
+
+  const [state, setState] = useRex(defaultState);
+
+  return {
+    get values() {
+      return state;
+    },
+    updateName(name: formFields["name"]) {
+      setState({ name });
+    },
+    updateEmail(email: formFields["email"]) {
+      setState({ email });
+    },
+    updatePhone(phone: formFields["phone"]) {
+      setState({ phone });
+    },
+    updateGender(gender: formFields["gender"]) {
+      setState({ gender });
+    },
+    updateAge(age: formFields["age"]) {
+      setState({ age });
+    }
+  };
+};
+
+const { RexProvider, useStore } = createRexStore(useFormField);
+
+export const FormFieldProvider = RexProvider;
+export const useFormFieldStore = useStore;