React hook form recipe

Code

import React, { useEffect, useState } from 'react';
import { FormInput } from '@ef-global/backpack/FormInput';
import { Form } from '@ef-global/backpack/Form';
import { useForm } from 'react-hook-form';
import { Button } from '@ef-global/backpack/Button';
import axios from 'axios';
import { FormGroup } from '@ef-global/backpack/FormGroup';
import { FormSwitch } from '@ef-global/backpack/FormSwitch';
import {
  FormRadio,
  FormRadioGroup,
  FormRadioTile,
} from '@ef-global/backpack/FormRadio';
import {FormSelect, Option} from "@ef-global/backpack/FormSelect";
import {FormPhoneInput} from "@ef-global/backpack/FormPhoneInput";
export const ReactHookForm = () => {
  const {register, handleSubmit, setValue, watch, control, formState, formState: {errors}} = useForm({mode: 'onChange'});
  const [result, setResult] = useState(null)
  const onSubmit = async data => {
    await axios.post('/api/form-tester', data).then(res => setResult(JSON.stringify(res.data, null, 2)))
  };
  useEffect(() => {
    register('radios', { required: true });
    register('tiles', { required: true });
  }, []);
  return (
    <>
      <Form onSubmit={handleSubmit(onSubmit)} id={`react-hook-form`}>
        <FormGroup>
          <FormInput
            type='text'
            placeholder='Input text'
            {...register('firstName', { required: true })}
          />
        </FormGroup>
        <br />
        <FormSwitch
          {...register('switch', { required: true, pattern: /true/ })}
          value={false}
          onCheckedChange={(checked) => {
            setValue('switch', checked);
          }}
          valid={!errors.switch}
        >
          Test switch
        </FormSwitch>
        <br />
        <FormRadioGroup
          onValueChange={(v) => {
            setValue('radios', v, {
              shouldValidate: true,
            });
          }}
          valid={!errors.radios}
          stack
          tile
        >
          <FormRadio value={'radio0'} valid={!errors.radios}>
            radio 0
          </FormRadio>
          <FormRadio value={'radio1'} valid={!errors.radios}>
            radio 1
          </FormRadio>
          <FormRadio value={'radio2'} valid={!errors.radios}>
            radio 2
          </FormRadio>
          <FormRadio value={'radio3'} valid={!errors.radios}>
            radio 3
          </FormRadio>
        </FormRadioGroup>
        <br />
        <FormRadioGroup
          onValueChange={(v) => {
            setValue('tiles', v, {
              shouldValidate: true,
            });
          }}
          valid={!errors.tiles}
          stack
          tile
        >
          <FormRadioTile value={'tile0'} valid={!errors.tiles}>
            tile 0
          </FormRadioTile>
          <FormRadioTile value={'tile1'} valid={!errors.tiles}>
            tile 1
          </FormRadioTile>
          <FormRadioTile value={'tile2'} valid={!errors.tiles}>
            tile 2
          </FormRadioTile>
          <FormRadioTile value={'tile3'} valid={!errors.tiles}>
            tile 3
          </FormRadioTile>
        </FormRadioGroup>
        <br />
        {/* @ts-ignore */}
        <FormSelect
          placeholder={'Select'}
          valid={!errors.select}
          onValueChange={(value) => setValue('select', value)}
          {...register('select', {required: true})}
        >
          <Option value={'1'}>1</Option>
          <Option value={'2'}>2</Option>
          <Option value={'3'}>3</Option>
          <Option value={'4'}>4</Option>
        </FormSelect>
        <br/>
        <br/>
        <FormPhoneInput
          floatingLabel={'Phone'}
          valid={!errors.phone}
          onValueChange={value => setValue('phone', value)}
          {...register('phone')}
        />
        <br/>
        <br/>
        <Button as={'button'} variant={'primary'} type={`submit`}>Submit</Button>
      </Form>
      {result && (
        <>
          <h5 style={{ marginBottom: 0 }}>Result:</h5>
          <pre style={{ marginTop: 10 }}>{result}</pre>
        </>
      )}
    </>
  );
};
Formik Overview