Component Patterns

External Components

TypeScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';
type InputProps = JSX.IntrinsicElements['input'] & {  path: string;};
const Input = (props: InputProps) => {  const {path, disabled, ...baseProps} = props;
  const [{value}, field] = useField(path);  const [{submitting}] = useFormStatus(path);
  return (    <input      {...baseProps}      disabled={disabled || submitting}      value={value}      onFocus={() => field.focus()}      onBlur={() => field.blur()}      onChange={(event) => field.setValue(event.target.value)}    />  );};
type SubmitProps = JSX.IntrinsicElements['button'];
const Submit = (props: SubmitProps) => {  const {disabled, ...baseProps} = props;
  const [{submitting}] = useFormStatus(path);
  return <button type="submit" disabled={disabled || submitting} {...props} />;};
const Example = () => {  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      <Form>        <Input path="field" />        <Submit>Submit</Submit>      </Form>    </FormProvider>  );};

JavaScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';
const Input = (props) => {  const {path, disabled, ...baseProps} = props;
  const [{value}, field] = useField(path);  const [{submitting}] = useFormStatus(path);
  return (    <input      {...baseProps}      disabled={disabled || submitting}      value={value}      onFocus={() => field.focus()}      onBlur={() => field.blur()}      onChange={(event) => field.setValue(event.target.value)}    />  );};
const Submit = (props) => {  const {disabled, ...baseProps} = props;
  const [{submitting}] = useFormStatus(path);
  return <button type="submit" disabled={disabled || submitting} {...props} />;};
const Example = () => {  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      <Form>        <Input path="field" />        <Submit>Submit</Submit>      </Form>    </FormProvider>  );};

Inline Components

TypeScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';import {useCallback} from 'react';
const Example = () => {  const Input = useCallback(    (props: JSX.IntrinsicElements['input'] & {path: string}) => {      const {path, disabled, ...baseProps} = props;
      const [{value}, field] = useField(path);      const [{submitting}] = useFormStatus(path);
      return (        <input          {...baseProps}          value={value}          onFocus={() => field.focus()}          onBlur={() => field.blur()}          onChange={(event) => field.setValue(event.target.value)}        />      );    },    [],  );
  const Submit = useCallback((props: JSX.IntrinsicElements['button']) => {    const {disabled, ...baseProps} = props;
    const [{submitting}] = useFormStatus(path);
    return (      <button type="submit" disabled={disabled || submitting} {...props} />    );  }, []);
  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      <Form>        <Input path="field" />        <Submit>Submit</Submit>      </Form>    </FormProvider>  );};

JavaScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';import {useCallback} from 'react';
const Example = () => {  const Input = useCallback((props) => {    const {path, disabled, ...baseProps} = props;
    const [{value}, field] = useField(path);    const [{submitting}] = useFormStatus(path);
    return (      <input        {...baseProps}        value={value}        onFocus={() => field.focus()}        onBlur={() => field.blur()}        onChange={(event) => field.setValue(event.target.value)}      />    );  }, []);
  const Submit = useCallback((props) => {    const {disabled, ...baseProps} = props;
    const [{submitting}] = useFormStatus(path);
    return (      <button type="submit" disabled={disabled || submitting} {...props} />    );  }, []);
  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      <Form>        <Input path="field" />        <Submit>Submit</Submit>      </Form>    </FormProvider>  );};

Render Callback

TypeScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';
const Example = () => {  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      {(form) => {        const [{value}, field] = useField('field', form);        const [{submitting}] = useFormStatus(path, form);
        return (          <Form>            <input              {...baseProps}              disabled={submitting}              value={value}              onFocus={() => field.focus()}              onBlur={() => field.blur()}              onChange={(event) => field.setValue(event.target.value)}            />            <button type="submit" disabled={submitting}>              Submit            </button>          </Form>        );      }}    </FormProvider>  );};

JavaScript

import {FormProvider, Form, useField, useFormStatus} from '@10xjs/form';
const Example = () => {  return (    <FormProvider      values={{field: 'initial value'}}      onSubmit={() => ({ok: true})}    >      {(form) => {        const [{value}, field] = useField('field', form);        const [{submitting}] = useFormStatus(path, form);
        return (          <Form>            <input              {...baseProps}              disabled={submitting}              value={value}              onFocus={() => field.focus()}              onBlur={() => field.blur()}              onChange={(event) => field.setValue(event.target.value)}            />            <button type="submit" disabled={submitting}>              Submit            </button>          </Form>        );      }}    </FormProvider>  );};