Add useResetSubmitErrors hook

README.md

@@ -15,12 +15,14 @@
 It's very intuitive to clear an error if the field containing the error is changing, and `final-form-submit-errors` does exactly that.
 
 ## Install
-`npm i final-form-submit-errors`  
-or  
+`npm i final-form-submit-errors`
+or
 `yarn add final-form-submit-errors`
 
 ## Usage
 
+With the `SubmitErrorsSpy` component:
+
 ```jsx
 import { Form } from 'react-final-form';
 import { submitErrorsMutators, SubmitErrorsSpy } from 'final-form-submit-errors';
@@ -42,6 +44,36 @@ const MyForm = () => (
 );
 ```
 
+With the `useResetSubmitErrors` hook:
+
+```jsx
+import { Form } from 'react-final-form';
+import { submitErrorsMutators, useResetSubmitErrors } from 'final-form-submit-errors';
+
+const FormContent = ({ handleSubmit }) => {
+    useResetSubmitErrors();
+
+    return (
+        <form onSubmit={handleSubmit}>
+            {/* ... */}
+        </form>
+    );
+};
+
+const MyForm = () => (
+    <Form
+        onSubmit={onSubmit}
+        mutators={{
+            // add submitErrorsMutators to your mutators
+            ...submitErrorsMutators,
+        }}
+        render={(props) => (
+            <FormContent {...props} />
+        )}
+    />
+);
+```
+
 ## License
 
 MIT. Copyright (c) Anton Ignatev.

src/index.ts

@@ -1,2 +1,3 @@
 export { default as submitErrorsMutators } from './submitErrorsMutators'
 export { default as SubmitErrorsSpy } from './SubmitErrorsSpy'
+export { default as useResetSubmitErrors } from './useResetSubmitErrors'

src/useResetSubmitErrors.ts

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+
+import { useForm, useFormState } from 'react-final-form';
+
+const useResetSubmitErrors = () => {
+    const { mutators } = useForm();
+    const { values } = useFormState({
+        subscription: { values: true },
+    });
+    const prevValues = useRef(values);
+    useFormState({
+        onChange: ({ values }) => {
+            mutators.resetSubmitErrors({
+                current: values,
+                prev: prevValues.current,
+            });
+
+            prevValues.current = values;
+        },
+        subscription: { values: true },
+    });
+};
+
+export default useResetSubmitErrors;