react-hook-form/react-hook-form v3.12.0

Version 3.12.0

on GitHub

This new feature allows your deep nested component to easily invoke hook methods.

• new Component FormContext : set up context
• new Hook useFormContext : getting useForm methods from children
• patch this bug #92

Code Example below:

import React from "react";
import ReactDOM from "react-dom";
import useForm, { FormContext } from "./src";
import Test from "./Test";

import "./styles.css";

function App() {
  const methods = useForm();
  const { register, handleSubmit } = methods;
  return (
    <FormContext {...methods}>
      <form onSubmit={handleSubmit(data => console.log(data))}>
        <h1>Hello CodeSandbox</h1>
        <input name="test" ref={register({ required: true })} />
        <h2>Start editing to see some magic happen!</h2>
        <Test />
        <button>test</button>
      </form>
    </FormContext>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
import * as React from "react";
import useForm, { useFormContext } from "./src";

export default function Test() {
  const { register } = useFormContext();
  return (
    <div>
      <input name="bill" ref={register} />
    </div>
  );
}