Field component

Author: CodeStix

src/elements/Field.tsx

@@ -0,0 +1,19 @@
+import { FormState } from "../form";
+import React, { useCallback } from "react";
+import { useListener } from "../hooks";
+
+export function Field<T extends object, K extends keyof T, C extends keyof JSX.IntrinsicElements | React.FunctionComponent<any>>(
+    props: {
+        form: FormState<T>;
+        name: K;
+        component?: C;
+    } & Omit<
+        (C extends React.FunctionComponent<infer P> ? P : {}) & (C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C] : {}),
+        "form" | "name" | "component" | "value" | "onChange"
+    >
+) {
+    const { form, component = "input", ...rest } = props;
+    const { value, setValue } = useListener(form, props.name);
+    const onChange = useCallback((ev: any) => setValue(ev.target?.value ?? ev), []);
+    return React.createElement(component, { ...rest, value, onChange });
+}

src/elements/index.ts

@@ -5,3 +5,5 @@ export * from "./FormError";
 export * from "./serializer";
 
 export type StyledFix<T, Props = {}> = T | ((props: Props) => JSX.Element);
+
+export * from "./Field";

src/hooks.ts

@@ -82,6 +82,7 @@ export function useListener<T extends object, K extends keyof T, State = Default
     name: K
 ) {
     const [, setRender] = useState(0);
+    const setValue = useCallback((value: T[K]) => form.setValue(name, value), [name, form]);
 
     useEffect(() => {
         let id = form.listen(name, () => {
@@ -93,7 +94,7 @@ export function useListener<T extends object, K extends keyof T, State = Default
     return {
         value: form.values[name],
         defaultValue: form.defaultValues[name],
-        setValue: (value: T[K]) => form.setValue(name, value),
+        setValue: setValue,
         dirty: form.dirtyMap[name],
         error: form.errorMap[name],
         state: form.state,

testing/src/Fieldform.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useForm, Field, AnyListener } from "typed-react-form";
+
+function Input(props: { value?: string; onChange?: (value: string) => void; style: React.CSSProperties }) {
+    return <input value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} style={props.style} />;
+}
+
+export function FieldForm() {
+    const form = useForm({ email: "", firstName: "", gender: "male" as "male" | "female" });
+
+    return (
+        <form>
+            <Field form={form} name="email" component="textarea" />
+            <Field form={form} name="email" />
+            <Field form={form} name="email" component={Input} style={{ margin: "1em" }} />
+            <Field form={form} name="gender" component="select">
+                <option value="male">male</option>
+                <option value="female">female</option>
+            </Field>
+            <pre>
+                <AnyListener form={form} render={() => JSON.stringify(form.values, null, 2)} />
+            </pre>
+        </form>
+    );
+}

testing/src/index.tsx

@@ -9,6 +9,7 @@ import { StyledForm } from "./StyledForm";
 import { ExampleForm } from "./ExampleForm";
 import App from "./App";
 import { CustomInputsForm } from "./CustomInput";
+import { FieldForm } from "./Fieldform";
 
 function Router() {
     return (
@@ -19,6 +20,7 @@ function Router() {
                 <Route path="/styled-form" component={StyledForm} />
                 <Route path="/test" component={App} />
                 <Route path="/custom-inputs" component={CustomInputsForm} />
+                <Route path="/field" component={FieldForm} />
                 <Route path="/" component={ExampleForm} />
             </Switch>
         </BrowserRouter>