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

To help you get started, we’ve selected a few react-hook-form examples, based on popular ways it is used in public projects.

github react-hook-form / react-hook-form / examples / restrictValidationFields.tsx View on Github external
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 onSubmit={handleSubmit(onSubmit)}>
      <h1>validationFields</h1>
      <label>First name: </label>
      <input name="firstName" ref={register({ required: true })} />

      <label>Last name: </label>
      <input name="lastName" ref={register({ required: true })} />
github lyft / clutch / frontend / packages / core / src / Resolver / input.tsx View on Github external
const QueryResolver: React.FC<QueryResolverProps> = ({
  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<ChangeEventTarget> | React.KeyboardEvent) => {
    setQueryData(convertChangeEvent(event).target.value);
  };

  // If there is at least 1 schema that has the ability to autocomplete we will enable it.
github react-hook-form / react-hook-form / website / src / Setting.tsx View on Github external
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 (
    <Animate
      play={showSetting}
      easeType="ease-in"
github react-hook-form / react-hook-form-website / src / components / Setting.tsx View on Github external
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 (
    <Animate
      play={showSetting}
      easeType="ease-in"
github opticdev / optic / webapp / src / components / loaders / ExampleDrivenSpecLoader.js View on Github external
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 });
github react-hook-form / react-hook-form / website / src / Builder.tsx View on Github external
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();
  };
github react-hook-form / react-hook-form / examples / basicValidation.tsx View on Github external
export default function App() {
  const { register, errors, handleSubmit } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First name</label>
        <input
          type="text"
          name="First name"
          ref={register({ required: true, maxLength: 80 })}
        />
      </div>
      <div>
github react-hook-form / react-hook-form / examples / formContext.tsx View on Github external
export default function App() {
  const methods = useForm();
  const { register, handleSubmit } = methods;
  return (
    <FormContext {...methods}>
      <form onSubmit={handleSubmit(data => console.log(data))}>
        <label>Test</label>
        <input name="test" ref={register({ required: true })} />
        <label>Nested Input</label>
        <Test />
        <input type="submit" />
      </form>
    </FormContext>
  );
}
github react-hook-form / react-hook-form / examples / dirtyTouchedSubmitted.tsx View on Github external
export default function App() {
  const { register, handleSubmit, formState } = useForm({
    mode: 'onChange',
  });
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  console.log(formState);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First name</label>
        <input type="text" name="First name" ref={register} />
      </div>
      <div>
        <label>Last name</label>
github react-hook-form / react-hook-form / examples / triggerFieldValidation.tsx View on Github external
export default function App() {
  const { register, errors, triggerValidation } = useForm();

  console.log('errors', errors);

  return (
    <div className="App">
      <h1>validationFeild</h1>
      <label>First name: </label>
      <input name="firstName" ref={register({ required: true })} />

      <label>Last name: </label>
      <input name="lastName" ref={register({ required: true })} />

      <button
        type="button"
        onClick={async () => {
          console.log(

react-hook-form

Performant, flexible and extensible forms library for React Hooks

MIT
Latest version published 7 days ago

Package Health Score

97 / 100
Full package analysis