Add example application

Benjamim Sonntag · Benjamim Sonntag · commit de39e39f89c0 · 2022-03-28T13:46:58.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 /coverage
 /node_modules
+.parcel-cache
+.parcel-dist
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Example app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="index.tsx"></script>
+  </body>
+</html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -0,0 +1,115 @@
+
+/**
+ * Module dependencies.
+ */
+
+import { FormProvider, useField, useFormState } from '../src';
+import ReactDOM from 'react-dom';
+
+/**
+ * `Input` component.
+ */
+
+function Input({ label, name, type = 'text' }) {
+  const { meta, onBlur, onChange, onFocus, value } = useField(name);
+
+  return (
+    <label>
+      <span
+        style={{
+          color: meta.active ? 'rebeccapurple' : 'initial'
+        }}
+      >
+        {label}
+      </span>
+
+      <input
+        name={name}
+        onBlur={onBlur}
+        onChange={event => onChange(event.target.value)}
+        onFocus={onFocus}
+        type={type}
+        value={value ?? ''}
+      />
+    </label>
+  );
+}
+
+/**
+ * `RerenderTester` component.
+ */
+
+function RerenderTester() {
+  console.log('RerenderTester rendered'); // eslint-disable-line no-console
+
+  return (
+    <div>
+      {'Re-render tester'}
+    </div>
+  );
+}
+
+/**
+ * `SubmitButton` component.
+ */
+
+function SubmitButton() {
+  const { isSubmitting } = useFormState();
+
+  return (
+    <button
+      disabled={isSubmitting}
+      type={'submit'}
+    >
+      {isSubmitting ? 'Submitting' : 'Submit'}
+    </button>
+  );
+}
+
+/**
+ * `App` component.
+ */
+
+function App() {
+  return (
+    <div>
+      <h1>{'Hello world!'}</h1>
+
+      <FormProvider
+        initialValues={{}}
+        jsonSchema={{}}
+        onSubmit={values => {
+          console.log('submit', values); // eslint-disable-line no-console
+
+          return new Promise(resolve => {
+            setTimeout(() => resolve, 5000);
+          });
+        }}
+      >
+        {({ submit }) => (
+          <form onSubmit={submit}>
+            <RerenderTester />
+
+            <Input
+              label={'Name'}
+              name={'name'}
+            />
+
+            <Input
+              label={'Email'}
+              name={'email'}
+            />
+
+            <SubmitButton />
+          </form>
+        )}
+      </FormProvider>
+    </div>
+  );
+}
+
+/**
+ * Render app.
+ */
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "coverage": "jest --coverage",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint-staged": "lint-staged",
+    "start-example": "parcel --dist-dir=.parcel-dist example/index.html",
     "test": "jest",
     "test-watch": "jest --watch --notify --onlyChanged",
     "version": "NODE_ENV=production npm run bundle && npm run changelog --future-release=$npm_package_version && git add -A CHANGELOG.md dist"
