GettingStarted.md

let's get started. 🚀

1. Import the hook

import { useForm } from '@xmanscript/useform';

• Get the register method out of it and start registering the form controls t0 the hook:

Learn about useForm here

2. Register Form Controls

  const { register } = useForm({ formName: 'test form', initialValues: {control_one:"",control_two:"",control_three:""} });

formName and initialValues are required attributes for useForm. initialValues can be empty, but it's recommended to avoid a 'controlled input to be uncontrolled' warning.

// Register form controls to the hook
-
<YourCustomFormControl
    {...register('control_one')}
/>
<YourCustomFormControl
    {...register('control_two')}
/>
<YourCustomFormControl
    {...register('control_three')}
/>

On doing so YourCustomFormControl is now bind with useForm hook.

Note that, YourCustomFormControl should be @xmanscript/useform friendly component. For @xmanscript/useform friendly component design refer here.

Disclamer: The idea of registering all the props using register('gender') is the incfuence of react-hook-form (https://react-hook-form.com) 😉.

Learn about register here.

3. Validation of Values

For value validation, you can pass in a validation schema to the useForm hook using Yup:

// import needed instances from yup
import { object, string } from 'yup';

const { register } = useForm({
    formName: 'test form',
    initialValues: {control_one:"",control_two:"",control_three:""},
    validationSchema: object({
      control_one: string().required('Name is Required'),
    }),
});

Alternatively, you can define your custom validation function:

const { register } = useForm({
    formName: 'test form',
    initialValues: {control_one:"",control_two:"",control_three:""},
    validationSchema: (values) => {
      const error: Record<string, any> = {};
      if (!values.control_one) error.control_one = 'Control One Not provided';
      return error;
    },
});

If no validation schema is provided, the form will be submitted directly when clicking the submit button.

4. Submiting the Form

To submit the form, @xmanscript/useform provides the onSubmitHandler method. You need to pass a submitHandler function to the hook:

const { register, onSubmitHandler } = useForm({
    formName: 'test form',
    initialValues: {control_one:"",control_two:"",control_three:""},
    validationSchema: object({
      control_one: string().required('Name is Required'),
    }),
    submitHandler: async (props) => {
      await postData(props.currentPacket);
    },
});

<form onSubmit={onSubmitHandler}>
  {/* ...form controls */}
</form>

The submitHandler function receives the form values and additional props, such as differencePacket and initialPacket, to simplify form data handling.

learn more about submitHandler here.

This guide covers the basic workflow to implement @xmanscript/useform. For detail documentation navidate to links provided in individual section of this guide above.