React bindings for FormML, providing hooks and components for seamless integration of FormML Models in React applications.

Quick Start

// sign-up.fml
form SignUp {
  @required("Let me know your cool name!")
  text     name
  @required @email
  text     email
  @required @minLength(8)
  text     password
  datetime birthday
}

// SignUpForm.tsx
import { Field, ErrorMessage, useFormML } from '@formml/react'

import SignUpModel from './sign-up.fml'

function SignUpForm() {
  const { $form, FormML, handleSubmit } = useFormML(SignUpModel)

  const onSubmit = handleSubmit((data) => {
    console.log('Form submitted:', data)
  })

  return (
    <FormML>
      <form onSubmit={onSubmit}>
        <Field $bind={$form.name} />
        <ErrorMessage $bind={$form.name} />

        <Field $bind={$form.email} />
        <ErrorMessage $bind={$form.email} />

        <Field $bind={$form.password} />
        <ErrorMessage $bind={$form.password} />

        <Field $bind={$form.birthday} />
        <ErrorMessage $bind={$form.birthday} />

        <button>Sign Up</button>
      </form>
    </FormML>
  )
}

Documentation

• FormML Documentation
• API Reference

License

MIT © Jindong Zhang