📋 React Hooks for form state management and validation (Web + React Native)
MIT License
Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago
errors
are not cleear after succesfful submitPublished by bluebill1049 over 5 years ago
typescript
supportPublished by bluebill1049 over 5 years ago
setValue
support validation as thrid argument:setValue('name', 'value', true)
triggerValidation
with array of fields should only trigger one re-render when execute (batch update)setValue
remove api shouldRender
Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago
forceValidation
from 'triggerValidation` to differentiate from validation mode, please refer to formState.Published by bluebill1049 over 5 years ago
triggerValidation
with multiple namesPublished by bluebill1049 over 5 years ago
clearError(name: string)
to clear an error which you can do setError(name: string)
Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago
submitFocusError
nativeValidation
Code example:
import React from "react";
import ReactDOM from "react-dom";
import useForm from "./src";
import "./styles.css";
function App() {
const { register, handleSubmit } = useForm({
nativeValidation: true
});
const onSubmit = async data => {
alert(JSON.stringify(data));
};
return (
<form onSubmit={e => e.preventDefault()}>
<label>First name</label>
<input
name="firstName"
ref={register({ required: "Please enter your first name." })}
/>
<label>Last name</label>
<input
name="lastName"
ref={register({ required: "Please enter your last name." })}
/>
<input type="submit" onClick={handleSubmit(onSubmit)} />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Published by bluebill1049 over 5 years ago
This new feature allows your deep nested component to easily invoke hook methods.
FormContext
: set up contextuseFormContext
: getting useForm
methods from childrenCode 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>
);
}
Published by bluebill1049 over 5 years ago
isValid
https://github.com/bluebill1049/react-hook-form/issues/92
Published by bluebill1049 over 5 years ago
reset
https://github.com/bluebill1049/react-hook-form/issues/91
Published by bluebill1049 over 5 years ago
setError
, the second argument should be optionalPublished by bluebill1049 over 5 years ago
isValid
in the formState
Published by bluebill1049 over 5 years ago
setError
setError() from submit handler not working #88Published by bluebill1049 over 5 years ago
Published by bluebill1049 over 5 years ago