v1

examples/common.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+export function mount(Node: React.FC) {
+  const section = window.document.createElement('section')
+  window.document.body.appendChild(section)
+  createRoot(section).render(<Node />)
+}

examples/custom.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { useForm } from '../dist'
+import { mount } from './common'
 
 const Index: React.FC = () => {
-  const { field, form, errors } = useForm({
+  const { field, form } = useForm({
     awesome: true,
   })
 
   return (
     <form
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault()
         console.log(form)
       }}
@@ -23,7 +23,7 @@ const Index: React.FC = () => {
           {...field('awesome', {
             setter: 'checked',
             getter: 'onChange',
-            extractor: e => e.target.checked,
+            extractor: (e) => e.target.checked,
           })}
         />
         Is it awesome?
@@ -34,4 +34,4 @@ const Index: React.FC = () => {
   )
 }
 
-ReactDOM.render(<Index />, document.getElementById('custom'))
+mount(Index)

examples/errorsAndValidation.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { useForm } from '../'
+import { mount } from './common'
 
 const Index: React.FC = () => {
   const { field, form, errors, isValid } = useForm(
@@ -11,27 +11,29 @@ const Index: React.FC = () => {
       password: '',
     },
     {
-      username: value => value.length > 3,
-      email: {
-        validator: /@/,
-        message: 'Must contain an @',
+      rules: {
+        username: (value) => value.length > 3,
+        email: {
+          rule: /@/,
+          message: 'Must contain an @',
+        },
+        password: [
+          {
+            rule: /[A-Z]/,
+            message: 'Must contain an uppercase letter',
+          },
+          {
+            rule: /[\d]/,
+            message: 'Must contain a digit',
+          },
+        ],
       },
-      password: [
-        {
-          validator: /[A-Z]/,
-          message: 'Must contain an uppercase letter',
-        },
-        {
-          validator: /[\d]/,
-          message: 'Must contain a digit',
-        },
-      ],
     }
   )
 
   return (
     <form
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault()
         if (isValid) console.log(form)
       }}
@@ -52,4 +54,4 @@ const Index: React.FC = () => {
   )
 }
 
-ReactDOM.render(<Index />, document.getElementById('errors'))
+mount(Index)

examples/index.html

@@ -7,7 +7,7 @@
       body {
         padding: 1em;
         margin: 0;
-        font-family: 'Courier New', Courier, monospace;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
 
       section {
@@ -51,14 +51,10 @@
     <section>
       <h3>Open the console to see the submitted data</h3>
     </section>
-    <section id="simple"></section>
-    <section id="errors"></section>
-    <section id="select"></section>
-    <section id="custom"></section>
 
-    <script src="./simple.tsx"></script>
-    <script src="./errorsAndValidation.tsx"></script>
-    <script src="./select.tsx"></script>
-    <script src="./custom.tsx"></script>
+    <script type="module" src="./simple.tsx"></script>
+    <script type="module" src="./errorsAndValidation.tsx"></script>
+    <script type="module" src="./select.tsx"></script>
+    <script type="module" src="./custom.tsx"></script>
   </body>
 </html>

examples/select.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { useForm } from '../dist'
+import { mount } from './common'
 
 const Index: React.FC = () => {
-  const { field, form, errors } = useForm({
+  const { field, form } = useForm({
     type: 'formhero',
   })
 
   return (
     <form
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault()
         console.log(form)
       }}
@@ -29,4 +29,4 @@ const Index: React.FC = () => {
   )
 }
 
-ReactDOM.render(<Index />, document.getElementById('select'))
+mount(Index)

examples/simple.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { useForm } from '../dist'
+import { mount } from './common'
 
 const Index: React.FC = () => {
-  const { field, form, errors } = useForm({
+  const { field, form } = useForm({
     username: 'unicorn',
     password: '',
   })
 
   return (
     <form
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault()
         console.log(form)
       }}
@@ -26,4 +26,4 @@ const Index: React.FC = () => {
   )
 }
 
-ReactDOM.render(<Index />, document.getElementById('simple'))
+mount(Index)