How to use react-hook-form - 10 common examples

function App() {
  const { register, errors, handleSubmit } = useForm({
    validationFields: ["lastName"] // will only validate lastName onSubmit
  });

  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  console.log("errors", errors);

  return (
    <form>
      <h1>validationFields</h1>
      <label>First name: </label>
      <input name="firstName">

      <label>Last name: </label>
      <input name="lastName"></form>

const QueryResolver: React.FC = ({
  inputType,
  schemas,
  submitHandler,
  enableAutocomplete = true,
}) => {
  const validation = useForm({
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    shouldFocusError: false,
  });

  const [searchParams] = useSearchParams();
  const [queryData, setQueryData] = React.useState(searchParams.get("q") || "");

  let typeLabel = schemas.map(schema => schema?.metadata.displayName).join();
  typeLabel = `Search by ${typeLabel}`;

  const handleChanges = (event: React.ChangeEvent | React.KeyboardEvent) => {
    setQueryData(convertChangeEvent(event).target.value);
  };

  // If there is at least 1 schema that has the ability to autocomplete we will enable it.

function Setting({ settingButton, toggleSetting, showSetting, setting, setConfig }) {
  const buttonRef = useRef(null);
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    setConfig(data);
    toggleSetting(false);
    settingButton.current.focus();
  };
  const tabIndex = showSetting ? 0 : -1;

  if (showSetting && buttonRef.current) {
    // @ts-ignore
    buttonRef.current.focus();
  }

  return (

function Setting({ settingButton, toggleSetting, showSetting, setting, setConfig }) {
  const buttonRef = useRef(null);
  const { register, handleSubmit } = useForm()
  const onSubmit = data => {
    setConfig(data);
    toggleSetting(false);
    settingButton.current.focus();
  };
  const tabIndex = showSetting ? 0 : -1;

  if (showSetting && buttonRef.current) {
    // @ts-ignore
    buttonRef.current.focus();
  }

  return (

function ExampleBuilderBase(props) {

  const { register, handleSubmit, setValue, getValues, watch } = useForm({
    defaultValues: {
      request: {
        method: 'GET',
        url: '/'
      },
      response: {
        statusCode: 200
      }
    },
  });


  // need watch() to update getValues() on change
  const watchAll = watch();
  const formValues = getValues({ nest: true });

function Builder({
  formData,
  updateFormData,
  showBuilder,
  toggleBuilder,
  editFormData,
  setFormData,
  builderButton,
  HomeRef,
  isMobile,
}) {
  const { register, handleSubmit, errors = {}, watch } = useForm();
  const [editIndex, setEditIndex] = useState(-1);
  const copyFormData = useRef([]);
  const closeButton = useRef(null);
  const [showValidation, toggleValidation] = useState(false);
  const onSubmit = (data, event) => {
    if (editIndex >= 0) {
      formData[editIndex] = data;
      updateFormData([...formData]);
      setFormData({});
      setEditIndex(-1);
    } else {
      // @ts-ignore
      updateFormData([...formData, ...[data]]);
    }
    event.target.reset();
  };

export default function App() {
  const { register, errors, handleSubmit } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  console.log(errors);

  return (
    <form>
      <div>
        <label>First name</label>
        <input name="First name" type="text">
      </div>
      <div></div></form>

export default function App() {
  const methods = useForm();
  const { register, handleSubmit } = methods;
  return (
    
      <form> console.log(data))}&gt;
        <label>Test</label>
        <input name="test">
        <label>Nested Input</label>
        
        <input type="submit">
      
    </form>
  );
}

export default function App() {
  const { register, handleSubmit, formState } = useForm({
    mode: 'onChange',
  });
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  console.log(formState);

  return (
    <form>
      <div>
        <label>First name</label>
        <input name="First name" type="text">
      </div>
      <div>
        <label>Last name</label></div></form>

export default function App() {
  const { register, errors, triggerValidation } = useForm();

  console.log('errors', errors);

  return (
    <div>
      <h1>validationFeild</h1>
      <label>First name: </label>
      <input name="firstName">

      <label>Last name: </label>
      <input name="lastName">

      <button type="button"> {
          console.log(</button></div>