docs(readme): Fix examples

JoseLion · Aug 8, 2023 · bc2c502 · bc2c502
1 parent 2dd4f73
commit bc2c502
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -44,17 +44,17 @@ interface Login {
   password: string;
 }
 
-const Field = fieldOf<Login>();
-
 const schema: ObjectSchema<Login> = object({
   email: string().email().required(),
   password: string().required(),
 });
 
+const Field = fieldOf<Login>();
+
 const SignIn = memo((): ReactElement => {
+
   const handleSubmit = useCallback((values: Login): void => {
     const { email, password } = values;
-
     // Use the validated value to sign in!
   }, []);
 

diff --git a/packages/native/README.md b/packages/native/README.md
@@ -39,7 +39,7 @@ To make using forms in React Native as simple as possible, `@lynxts/native` prov
 It also provides a helper `TextField<T>` component based on the [TextInput](https://reactnative.dev/docs/textinput) foundational component. This component adds a label and error handling and its intention is for users to quickly jump into using simple forms. However, we strongly recommend creating you own [custom field](../core/README.md#custom-fields) abstractions to get better control and customization.
 
 ```tsx
-import { FormProvider, fieldOf } from "@lynxts/core";
+import { FormProvider } from "@lynxts/core";
 import { SubmitButton, textFieldOf } from "@lynxts/native";
 import { ReactElement, memo, useCallback } from "react";
 import { ObjectSchema, object, string } from "yup";
@@ -49,17 +49,17 @@ interface Login {
   password: string;
 }
 
-const TextField = textFieldOf<Login>();
-
 const schema: ObjectSchema<Login> = object({
   email: string().email().required(),
   password: string().required(),
 });
 
+const TextField = textFieldOf<Login>();
+
 const SignIn = memo((): ReactElement => {
+
   const handleSubmit = useCallback((values: Login): void => {
     const { email, password } = values;
-
     // Use the validated value to sign in!
   }, []);
 

diff --git a/packages/web/README.md b/packages/web/README.md
@@ -38,7 +38,6 @@ To make using forms in React.js web applications as simple as possible, `@lynxts
 Additionally, this package provides helper components of the basic form elements: `<input>`, `<select>`, and `<textarea>`. These components adds a `<label>` and error handling and their intention is for users to quickly jump into using simple forms. However, we strongly recommend creating you own [custom field](../core/#custom-fields) abstractions to get better control and customization.
 
 ```tsx
-import { FormProvider } from "@lynxts/core";
 import { Form, inputOf } from "@lynxts/web";
 import { ReactElement, memo, useCallback } from "react";
 import { ObjectSchema, object, string } from "yup";
@@ -48,27 +47,27 @@ interface Login {
   password: string;
 }
 
-const Input = inputOf<Login>();
-
 const schema: ObjectSchema<Login> = object({
   email: string().email().required(),
   password: string().required(),
 });
 
+const Input = inputOf<Login>();
+
 const SignIn = memo((): ReactElement => {
+
   const handleSubmit = useCallback((values: Login): void => {
     const { email, password } = values;
-
     // Use the validated value to sign in!
   }, []);
 
   return (
     <Form onSubmit={handleSubmit} validation={schema}>
-      <Input name="email" type="email" label="Email:" />
-      <Input name="password" type="password" label="Passwrod:" />
+      <Input name="email" label="Email:" />
+      <Input name="password" label="Password:" />
 
       <button type="submit">{"SignIn"}</button>
-    </FormProvider>
+    </Form>
   );
 });
 ```