docs: add demo link into readme

.changeset/gentle-pears-jump.md

@@ -0,0 +1,5 @@
+---
+'@opentf/react-form': patch
+---
+
+Added demo link into the readme.

README.md

@@ -10,6 +10,8 @@
 
 > Build forms & manage their state in React.
 
+## [View Demo](https://react-form.pages.dev/#demo)
+
 ## Features
 
 - Simple APIs to use
@@ -55,9 +57,32 @@ export default function App() {
       }}
     >
       <Field name="field1" />
+      <button type="submit">Submit</button>
+    </Form>
+  );
+}
+```
+
+## Usage (TypeScript)
 
-      {/* Other fields... */}
+```tsx
+import { Form, Field } from '@opentf/react-form';
+
+interface FormValues {
+  field1: string;
+}
 
+export default function App() {
+  const initialValues: FormValues = { field1: '' };
+
+  return (
+    <Form
+      initialValues={initialValues}
+      onSubmit={(values) => {
+        console.log(values);
+      }}
+    >
+      <Field name="field1" />
       <button type="submit">Submit</button>
     </Form>
   );
@@ -66,7 +91,7 @@ export default function App() {
 
 ## Documentation
 
-Please visit [https://react-form.pages.dev/](https://react-form.pages.dev/) for complete documentation.
+Please visit [https://react-form.pages.dev/](https://react-form.pages.dev/) to get started.
 
 ## License
 

apps/website/docs/API/useField.md

@@ -25,19 +25,13 @@ The `hook` function returns an `object` containing a `field` object, an `error`
 ```jsx
 import { useField } from '@opentf/react-form';
 
-function MyCustomField1({ name }) {
-  const { field } = useField(name);
-
-  return <input {...field} />;
-}
-
-function MyCustomField2({ name }) {
-  const { field, error, setValue } = useField(name);
+function MyCustomField({ name }) {
+  const { field, error } = useField(name);
 
   return (
     <>
       <input
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => field.onChange(e.target.value)}
         onBlur={field.onBlur}
         value={field.value}
       />

apps/website/src/examples/SelectField.jsx

@@ -5,7 +5,7 @@ export default function App() {
   return (
     <div className="App">
       <Form
-        initialValues={{ location: { city: 'Chennai' } }}
+        initialValues={{ location: { city: 'Chennai' }, pets: [] }}
         onSubmit={(values) => console.log(values)}
       >
         <div>

packages/react-form/README.md

@@ -10,6 +10,8 @@
 
 > Build forms & manage their state in React.
 
+## [View Demo](https://react-form.pages.dev/#demo)
+
 ## Features
 
 - Simple APIs to use
@@ -55,9 +57,32 @@ export default function App() {
       }}
     >
       <Field name="field1" />
+      <button type="submit">Submit</button>
+    </Form>
+  );
+}
+```
+
+## Usage (TypeScript)
 
-      {/* Other fields... */}
+```tsx
+import { Form, Field } from '@opentf/react-form';
+
+interface FormValues {
+  field1: string;
+}
 
+export default function App() {
+  const initialValues: FormValues = { field1: '' };
+
+  return (
+    <Form
+      initialValues={initialValues}
+      onSubmit={(values) => {
+        console.log(values);
+      }}
+    >
+      <Field name="field1" />
       <button type="submit">Submit</button>
     </Form>
   );
@@ -66,7 +91,7 @@ export default function App() {
 
 ## Documentation
 
-Please visit [https://react-form.pages.dev/](https://react-form.pages.dev/) for complete documentation.
+Please visit [https://react-form.pages.dev/](https://react-form.pages.dev/) to get started.
 
 ## License