This new feature allows your deep nested component to easily invoke hook methods.
- new Component
FormContext
: set up context - new Hook
useFormContext
: gettinguseForm
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>
);
}