TypeScript

Since the library is written in TypeScript and we put a lot of emphasis on the development experience, you can expect maximum TypeScript support.

Type-safe props

For example, to pass your form to another component via props, you can use the FormStore type to get type safety. Most of the types you can import can be found in our API reference.

import { Form, type FormStore, Field, useFormStore } from '@modular-forms/react';

type LoginForm = {
  email: string;
  password: string;
}

export function LoginPage() {
  const loginForm = useFormStore<LoginForm>();
  return <FormContent loginForm={loginForm} />
}

type FormContentProps {
  loginForm: FormStore<LoginForm>;
}

function FormContent({ loginForm }: FormContentProps) {
  return (
    <Form of={loginForm}>
      <Field of={loginForm} name="email">
        {(field, props) => <input {...props} type="email" />}
      </Field>
      <Field of={loginForm} name="password">
        {(field, props) => <input {...props} type="password" />}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}