Rename component -> as

Author: CodeStix

src/elements/Field.tsx

@@ -12,11 +12,11 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
     props: {
         form: FormState<T>;
         name: K;
-        component?: C;
-    } & Omit<ElementProps<C>, "form" | "name" | "component" | "value" | "onChange">
+        as?: C;
+    } & Omit<ElementProps<C>, "form" | "name" | "as" | "value" | "onChange">
 ) {
-    const { form, component = "input", ...rest } = props;
+    const { form, as = "input", ...rest } = props;
     const { value, setValue } = useListener(form, props.name);
     const onChange = useCallback((ev: any) => setValue(ev.target?.value ?? ev), [setValue]);
-    return React.createElement(component, { ...rest, value, onChange });
+    return React.createElement(as, { ...rest, value, onChange });
 }

src/elements/FieldError.tsx

@@ -13,12 +13,12 @@ export function FieldError<
     props: {
         form: FormState<T, State, Error>;
         name: K;
-        component?: C;
+        as?: C;
         transformer?: (error: Error) => React.ReactNode;
-    } & Omit<ElementProps<C>, "transformer" | "component" | "name" | "form" | "children">
+    } & Omit<ElementProps<C>, "transformer" | "as" | "name" | "form" | "children">
 ) {
-    const { form, component = React.Fragment, transformer, ...rest } = props;
+    const { form, as = React.Fragment, transformer, ...rest } = props;
     const { error } = useListener(form, props.name);
     if (!error || typeof error === "object") return null;
-    return React.createElement(component, { ...rest, children: String(transformer ? transformer(error as Error) : error) });
+    return React.createElement(as, { ...rest, children: String(transformer ? transformer(error as Error) : error) });
 }

testing/src/Fieldform.tsx

@@ -29,10 +29,11 @@ export function FieldForm() {
 
     return (
         <form onSubmit={form.handleSubmit(submit)}>
-            <Field form={form} name="email" component="input" />
-            <Field form={form} name="email" component={Input} style={{ margin: "2em" }} />
-            <FieldError form={form} name="email" component={Error} />
-            <Field form={form} name="gender" component="select">
+            <Field form={form} name="email" as="input" />
+            <Field form={form} name="email" style={{ margin: "2em" }} />
+            <Field form={form} name="email" as={Input} style={{ margin: "2em" }} />
+            <FieldError form={form} name="email" as={Error} />
+            <Field form={form} name="gender" as="select">
                 <option value="male">male</option>
                 <option value="female">female</option>
             </Field>