feat(useFormState): Implement hook for form subscription. (#15)

* feat(useForm): Create form lazily.

* fix(useForm): Use `getForm` in `useEffect`.

* feat(useFormState): Implement hook for form subscription.

* fix(useFormState): Resubscribe only on subscription props change.

* style(useFormState): Make `subscriptionToInputs` and arrow function.

Author: avocadowastaken

src/index.d.ts

@@ -41,6 +41,10 @@ interface FormConfig extends Config {
 
 declare module 'react-final-form-hooks' {
   export function useForm(config: FormConfig): FormRenderProps
+  export function useFormState(
+    form: FormApi,
+    subscription?: FormSubscription
+  ): FormRenderProps
 
   export function useField(
     name: string,

src/index.js

@@ -1,2 +1,3 @@
 export { default as useField } from './useField'
 export { default as useForm } from './useForm'
+export { default as useFormState } from './useFormState'

src/useForm.js

@@ -1,10 +1,6 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { createForm, formSubscriptionItems } from 'final-form'
-
-export const all = formSubscriptionItems.reduce((result, key) => {
-  result[key] = true
-  return result
-}, {})
+import { useCallback, useRef } from 'react'
+import { createForm } from 'final-form'
+import useFormState from './useFormState'
 
 const useForm = ({ subscription, ...config }) => {
   const form = useRef()
@@ -16,10 +12,7 @@ const useForm = ({ subscription, ...config }) => {
 
     return form.current
   }
-  const [state, setState] = useState({})
-  useEffect(() => getForm().subscribe(setState, subscription || all), [
-    subscription
-  ])
+  const state = useFormState(getForm(), subscription)
   const handleSubmit = useCallback(event => {
     if (event) {
       if (typeof event.preventDefault === 'function') {

src/useFormState.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+import { formSubscriptionItems } from 'final-form'
+
+export const all = formSubscriptionItems.reduce((result, key) => {
+  result[key] = true
+  return result
+}, {})
+
+/**
+ * Converts { active: true, data: false, ... } to `[true, false, false, ...]`.
+ */
+const subscriptionToInputs = subscription =>
+  formSubscriptionItems.map(key => Boolean(subscription[key]))
+
+const useFormState = (form, subscription = all) => {
+  const [state, setState] = useState(() => form.getState())
+
+  useEffect(() => form.subscribe(setState, subscription), [
+    form,
+    ...subscriptionToInputs(subscription)
+  ])
+
+  return state
+}
+
+export default useFormState