Rewrote to use useField hook and provide useFieldArray hook (#80)

* Rewrote to use useField hook and provide useFieldArray hook

* TOC

* Documented isEqual default

* Hook test

Author: erikras

README.md

@@ -85,6 +85,7 @@ const MyForm = () => (
 - [Rendering](#rendering)
 - [API](#api)
   - [`FieldArray : React.ComponentType<FieldArrayProps>`](#fieldarray--reactcomponenttypefieldarrayprops)
+  - [`useFieldArray`](#usefieldarray)
   - [`version: string`](#version-string)
 - [Types](#types)
   - [`FieldArrayProps`](#fieldarrayprops)
@@ -154,6 +155,12 @@ The following can be imported from `react-final-form-arrays`.
 A component that takes [`FieldArrayProps`](#fieldarrayprops) and renders an
 array of fields
 
+### `useFieldArray`
+
+The `useFieldArray` hook takes two parameters, the first is the name of the field, and the second is an optional object that looks just like [`FieldArrayProps`](#fieldarrayprops), except without the name. It returns an object just like [`FieldArrayRenderProps`](#fieldarrayrenderprops).
+
+`useFieldArray` is used interally inside `FieldArray`.
+
 ### `version: string`
 
 The current used version of 🏁 React Final Form Arrays.
@@ -191,7 +198,7 @@ passed into the `<FieldArray/>` component.
 
 #### `isEqual?: (allPreviousValues: Array<any>, allNewValues: Array<any>) => boolean`
 
-A function that can be used to compare two arrays of values (before and after every change) and calculate pristine/dirty checks.
+A function that can be used to compare two arrays of values (before and after every change) and calculate pristine/dirty checks. Defaults to a function that will `===` check each element of the array.
 
 #### `subscription?: FieldSubscription`
 

package-lock.json

@@ -25,64 +25,67 @@
   },
   "homepage": "https://github.com/final-form/react-final-form-arrays#readme",
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-decorators": "^7.3.0",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
     "@babel/plugin-proposal-function-sent": "^7.2.0",
     "@babel/plugin-proposal-json-strings": "^7.2.0",
     "@babel/plugin-proposal-numeric-separator": "^7.2.0",
     "@babel/plugin-proposal-throw-expressions": "^7.2.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@types/react": "^16.8.6",
+    "@types/react": "^16.8.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
-    "bundlesize": "^0.17.1",
+    "babel-jest": "^24.8.0",
+    "bundlesize": "^0.17.2",
     "doctoc": "^1.4.0",
-    "eslint": "^5.15.0",
-    "eslint-config-react-app": "^3.0.7",
+    "eslint": "^5.16.0",
+    "eslint-config-react-app": "^4.0.1",
     "eslint-plugin-babel": "^5.2.1",
-    "eslint-plugin-flowtype": "^3.4.2",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-flowtype": "^3.9.1",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "final-form": "^4.11.1",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
+    "final-form": "^4.13.0",
     "final-form-arrays": "^1.1.2",
-    "flow-bin": "^0.94.0",
+    "flow-bin": "^0.98.1",
     "glow": "^1.2.2",
-    "husky": "^1.3.1",
-    "jest": "^24.1.0",
-    "jest-watch-typeahead": "^0.2.1",
-    "lint-staged": "^8.1.5",
-    "nps": "^5.9.4",
+    "husky": "^2.3.0",
+    "jest": "^24.8.0",
+    "jest-dom": "^3.4.0",
+    "jest-watch-typeahead": "^0.3.1",
+    "lint-staged": "^8.1.7",
+    "nps": "^5.9.5",
     "nps-utils": "^1.7.0",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.1",
     "prettier-eslint-cli": "^4.7.1",
     "raf": "^3.4.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-final-form": "^4.0.2",
-    "rollup": "^1.4.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-final-form": "^6.0.0",
+    "react-testing-library": "^7.0.1",
+    "rollup": "^1.12.4",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-uglify": "^6.0.2",
-    "typescript": "^3.3.3333"
+    "typescript": "^3.4.5"
   },
   "peerDependencies": {
     "final-form": ">=4.0.0",
     "final-form-arrays": ">=1.0.4",
-    "react-final-form": "^4.0.0",
+    "react-final-form": "^6.0.0",
     "prop-types": "^15.6.0",
-    "react": "^16.3.0"
+    "react": "^16.8.0"
   },
   "jest": {
     "watchPlugins": [
@@ -114,7 +117,6 @@
     }
   ],
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
-    "react-lifecycles-compat": "^3.0.4"
+    "@babel/runtime": "^7.4.5"
   }
 }

package.json

@@ -16,9 +16,11 @@ const basic = () => (
   >
     {({
       handleSubmit,
-      mutators: { push, pop }, // injected from final-form-arrays above
+      form: {
+        mutators: { push, pop }, // injected from final-form-arrays above
+        reset
+      },
       pristine,
-      reset,
       submitting,
       values
     }) => {