Add missing hooks

jaredpalmer · Nov 19, 2020 · 90fd693 · 90fd693
1 parent a7ecaed
commit 90fd693
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 5 deletions.
diff --git a/.changeset/lazy-olives-agree.md b/.changeset/lazy-olives-agree.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Add hooks `useSetValue`, `useSetErrors`, `useSetTouched`, `useSetStatus`, `useSubmitForm`, `useResetForm`, `useIsSubmitting`, `useIsValid`, `useIsDirty`, `useValidateForm`, `useValidateField`
diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFieldError, useFieldTouched } from './useField';
+import { useFieldError, useFieldTouched } from './hooks';
 import { isFunction } from './utils';
 
 export interface ErrorMessageProps {

diff --git a/packages/formik/src/FastField.tsx b/packages/formik/src/FastField.tsx
@@ -6,7 +6,7 @@ import {
   GenericFieldHTMLAttributes,
   SharedFieldProps,
 } from './types';
-import { useField, UseFieldProps } from './useField';
+import { useField, UseFieldProps } from './hooks';
 import { isEmptyChildren, isFunction } from './utils';
 
 export type FastFieldProps<FieldValue = any> = {

diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
@@ -8,7 +8,7 @@ import {
   GenericFieldHTMLAttributes,
   SharedFieldProps,
 } from './types';
-import { useField, UseFieldProps } from './useField';
+import { useField, UseFieldProps } from './hooks';
 import { isEmptyChildren, isFunction } from './utils';
 
 export interface FieldProps<V = any, FormValues = any> {

diff --git a/packages/formik/src/useField.tsx → packages/formik/src/hooks.tsx b/packages/formik/src/useField.tsx → packages/formik/src/hooks.tsx
@@ -390,7 +390,43 @@ export function useTouched<Values>() {
 }
 
 /**
- * Returns Formik status and updater function
+ * Returns Formik touched updater function
+ * @public
+ */
+export function useSetTouched<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setTouched']
+  >(ctx => ctx.setTouched);
+  return update;
+}
+
+/**
+ * Returns Formik values updater function
+ * @public
+ */
+export function useSetValues<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setValues']
+  >(ctx => ctx.setValues);
+  return update;
+}
+
+/**
+ * Returns Formik errors updater function
+ * @public
+ */
+export function useSetErrors<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setErrors']
+  >(ctx => ctx.setErrors);
+  return update;
+}
+
+/**
+ * Returns Formik status state and updater function
  * @public
  */
 export function useStatus<T>() {
@@ -405,6 +441,97 @@ export function useStatus<T>() {
   return [state, update];
 }
 
+/**
+ * Returns Formik status updater function
+ * @public
+ */
+export function useSetStatus() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['setStatus']
+  >(ctx => ctx.setStatus);
+}
+
+/**
+ * Returns a function to imperatively submit the form
+ * @public
+ */
+export function useSubmitForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['submitForm']
+  >(ctx => ctx.submitForm);
+}
+
+/**
+ * Returns whether the form submission is currently being attempted
+ * @public
+ */
+export function useIsSubmitting() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['isSubmitting']
+  >(ctx => ctx.isSubmitting);
+}
+
+/**
+ * Returns function to reset the form
+ * @public
+ */
+export function useResetForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['resetForm']
+  >(ctx => ctx.resetForm);
+}
+
+/**
+ *
+ * Returns whether the form submission is currently being attempted
+ * @public
+ */
+export function useIsValid() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['isValid']
+  >(ctx => ctx.isValid);
+}
+
+/**
+ * Returns whether the form is dirty
+ * @public
+ */
+export function useIsDirty() {
+  return useFormikContextSelector<unknown, FormikContextType<unknown>['dirty']>(
+    ctx => ctx.dirty
+  );
+}
+
+/**
+ * Returns a function to imperatively validate the entire form
+ * @public
+ */
+export function useValidateForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['validateForm']
+  >(ctx => ctx.validateForm);
+}
+
+/**
+ * Returns a function to imperatively validate a field
+ * @public
+ */
+export function useValidateField(fieldName?: string) {
+  const validateField = useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['validateField']
+  >(ctx => ctx.validateField);
+  return React.useCallback(() => {
+    return fieldName ? validateField(fieldName) : validateField;
+  }, [fieldName]);
+}
+
 function useFieldMeta<Values>(name: string) {
   const [value] = useFieldValue<Values>(name);
   const [touched] = useFieldTouched<Values>(name);

diff --git a/packages/formik/src/index.tsx b/packages/formik/src/index.tsx
@@ -9,4 +9,4 @@ export * from './connect';
 export * from './ErrorMessage';
 export * from './FormikContext';
 export * from './FastField';
-export * from './useField';
+export * from './hooks';