@01works/react-form

@01works/react-form

Quick & Simple React Form Maker (Context, Provider, Hook)

Getting Started

Installation

npm i @01works/react-form
# or
pnpm add @01works/react-form
# or
yarn add @01works/react-form
# or
bun add @01works/react-form

Quick Start

import { createForm } from '@01works/react-form'

type Form = {
  name: string
  birth: string
  email: string
}

export const { hook: useForm, provider: FormProvider } = createForm<Form>({
  defaultValues: {
    name: '',
    birth: '',
    email: '',
  },
})

  const { register, errors, isLoading, handleSubmit, watch } = useForm({
    options: {
      name: {
        required: 'Please enter your name',
        maxLength: 10,
      },
      birth: {
        required: 'Please enter your birth',
        pattern: {
          value: /^\d{4}\/\d{2}\/\d{2}$/,
          message: 'Birth format is not correct',
        },
      },
      email: {
        required: 'Please enter your email',
        pattern: {
          value: /^\w+@\w+\.\w+$/,
          message: 'Email format is not correct',
        },
      },
    },
  })

const birth = watch('birth') as string