@graphcommerce/react-hook-form NPM

Form

The Form component is an extension of the (React Hook Form)(https://react-hook-form.com/) package which adds new hooks.

`useFormGqlMutation`

Simple example:

import { useFormGqlMutation } from '@graphcommerce/react-hook-form'

const mutation = gql`
  mutation ApplyCouponToCart($cartId: String!, $couponCode: String!) {
    applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {
      cart {
        id
      }
    }
  }
`

export default function MyComponent() {
  const form = useFormGqlMutation(mutation, {
    defaultValues: { cartId: cartQuery?.cart?.id },
  })
  const { errors, handleSubmit, register, formState, required, error } = form

  // We don't need to provide an actual handler as useFormGqlMutation already adds that.
  const submit = handleSubmit(() => {})

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={formState.isSubmitting}
      />
      {errors.couponCode?.message || error?.message}
      <button type='submit'>submit</button>
    </form>
  )
}

`useFormGqlQuery`

import { useFormGqlQuery } from '@graphcommerce/react-hook-form'

const query = gql`
  query IsEmailAvailable($email: String!) {
    isEmailAvailable(email: $email) {
      is_email_available
    }
  }
`

export default function MyComponent() {
  const form = useFormGqlQuery(query, {})
  const { errors, handleSubmit, register, formState, required, error } = form

  // We don't need to provide an actual handler as useFormGqlQuery already adds that.
  const submit = handleSubmit(() => {})

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={formState.isSubmitting}
      />
      {errors.couponCode?.message || error?.message}
      <button type='submit'>submit</button>
    </form>
  )
}

`useFormAutoSubmit`

import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'

export default function MyAutoSubmitForm() {
  // Regular useForm hook, but you can also use useFormGqlMutation
  const form = useForm()
  const { errors, handleSubmit, register, formState, required } = form

  const submit = handleSubmit(() => {
    console.log('submitted')
  })
  const autoSubmitting = useFormAutoSubmit({
    form,
    submit,
    fields: ['couponCode'], //optional, default: all fields
    wait: 1200, // optional, default: 500ms
  })
  const disableFields = formState.isSubmitting && !autoSubmitting

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={formState.isSubmitting}
      />
      {errors.couponCode?.message}
    </form>
  )
}

`useFormPersist`

import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'

export default function MyAutoSubmitForm() {
  // Regular useForm hook, but you can also use useFormGqlMutation
  const form = useForm()
  const { errors, handleSubmit, register, formState, required } = form

  const submit = handleSubmit(() => {
    console.log('submitted')
  })
  const autoSubmitting = useFormPersist({ form, name: 'MyForm' })
  const disableFields = formState.isSubmitting && !autoSubmitting

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={disableFields}
      />
      {errors.couponCode?.message}
    </form>
  )
}

FAQ

`Why is my useForm hook not submitting anything?`

const form = useForm() // INCORRECT

const form useForm({ // CORRECT
  mode: 'onSubmit',
  defaultValues: {
   yourFieldName: 'default value',
  },
})

@types/lodash lodash

@infinitebrahmanuniverse/nolb-_graph @everything-registry/sub-chunk-373 @graphcommerce/magento-payment-mollie @graphcommerce/magento-graphcms @zalastax/nolb-_graph

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

4 months ago

5 months ago

5 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago