form-hooks - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0-alpha.0

dist/index.js

package.json

		{
		"name": "form-hooks",
		"version": "0.3.0",
		"version": "0.4.0-alpha.0",
		"description": "Easy forms in React with hooks",
		"main": "lib/index.js",
		"main": "dist/index.js",
		"umd:main": "dist/form-hooks.umd.production.js",
		"module": "dist/form-hooks.es.production.js",
		"typings": "dist/index.d.ts",
		"scripts": {
		"test": "jest",
		"prepublishOnly": "rm -rf ./lib && mkdir ./lib && BABEL_ENV=commonjs babel src --out-dir lib"
		"build": "tsdx build",
		"start": "tsdx watch",
		"test": "tsdx test --env=jsdom"
		},
		@@ -28,14 +32,31 @@ "repository": {
		"homepage": "https://github.com/BenMagyar/form-hooks#readme",
		"husky": {
		"hooks": {
		"pre-commit": "pretty-quick --staged"
		}
		},
		"prettier": {
		"printWidth": 80,
		"semi": true,
		"singleQuote": true,
		"trailingComma": "es5"
		},
		"devDependencies": {
		"@babel/cli": "^7.1.2",
		"@babel/core": "^7.1.2",
		"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
		"@babel/preset-env": "^7.1.0",
		"react": "^16.7.0-alpha.0",
		"react-dom": "^16.7.0-alpha.0"
		"@types/jest": "^24.0.12",
		"@types/react": "^16.8.16",
		"@types/react-dom": "^16.8.4",
		"husky": "^2.2.0",
		"prettier": "^1.17.0",
		"pretty-quick": "^1.10.0",
		"react": "^16.9.0-alpha.0",
		"react-dom": "^16.9.0-alpha.0",
		"react-test-renderer": "^16.9.0-alpha.0",
		"react-testing-library": "^7.0.0",
		"tsdx": "^0.5.6",
		"typescript": "^3.4.5"
		},
		"peerDependencies": {
		"react": ">=16.7.0-alpha.0",
		"react-dom": ">=16.7.0-alpha.0"
		"react": ">=16.8",
		"react-dom": ">=16.8"
		}
		}

README.md

		# form-hooks

		Easily create forms in React components -- with hooks! Essentially
		a dumbed down version of [Formik][] using hooks. There are definitely
		some missing cases here (for instance resetting the form on value changes,
		per field validation and React native) 🤷‍♂️.
		Easily create forms in React components -- with hooks! Essentially
		a dumbed down version of [Formik][] using hooks.

		@@ -41,4 +39,4 @@ ## Getting Started
		<input name="name"
		type="text"
		value={values.name}
		type="text"
		value={values.name}
		onChange={handleChange}
		@@ -49,4 +47,4 @@ onBlur={handleBlur}
		<input name="email"
		type="text"
		value={values.email}
		type="text"
		value={values.email}
		onChange={handleChange}
		@@ -64,22 +62,22 @@ onBlur={handleBlur}

		### `useForm` - `options`
		### `useForm<Values>(options: FormHookOptions): FormHookState<Values>` - `FormHookOptions`

		The `useForm` hook takes some options (as an object) to initialize state
		The `useForm` hook takes some options (as an object) to initialize state
		and manage form validation/submissions.

		#### `initialValues`
		#### `initialValues: Values`

		An object with the forms initial values. These values should not be required.

		#### `onSubmit(values)`
		#### `onSubmit: (values: Values) => void`

		Called when a form is submitted with the values set. Only called if validation
		passes.
		passes.

		#### `validate(values, errors)`
		#### `validate: (values: Values) => FormHookErrors<Values> \| Promise<FormHookErrors<Values>>`

		Called when a form is submitted prior to the `onSubmit` call. Returns an object
		Called when a form is submitted prior to the `onSubmit` call. Returns an object
		of errors similar to `Formik`.

		#### `validateOnBlur` - true
		#### `validateOnBlur: boolean` - _true_

		@@ -90,3 +88,3 @@ Indicates if `useForm` should re-validate the input on blur.

		#### `validateOnChange` - true
		#### `validateOnChange: boolean` - _true_

		@@ -97,29 +95,28 @@ Indicates if `useForm` should re-validate the input on change.

		### `useForm<Values>(options: FormHookOptions): FormHookState<Values>` - `FormHookState`

		### `useForm` - `returned`
		#### `errors: FormHookErrors<Values>`

		#### `errors`

		An object that contains the form errors where the key is the field name
		An object that contains the form errors where the key is the field name
		and the value is the error message.

		#### `touched`
		#### `touched: FormHookTouched<Values>`

		An object that contains which form fields have been touched. The key is
		An object that contains which form fields have been touched. The key is
		the field name, the value is a boolean of if the field has been touched.

		#### `values`
		#### `values: FormHookValues`

		An object that contains all of the values of the form. Initialized with the
		An object that contains all of the values of the form. Initialized with the
		`initialValues` originally passed in. Modified by the `handleChange` handler.

		#### `handleBlur()`
		#### `handleBlur: (event: React.ChangeEvent<any>) => void`

		Marks a field as `touched` to show errors after all fields are touched.

		#### `handleChange()`
		#### `handleChange: (event: React.ChangeEvent<any>) => void`

		Changes the fields value in the `values` state.

		#### `handleSubmit(values)`
		#### `handleSubmit: (event: React.ChangeEvent<HTMLFormElement>) => Promise<void>`

		@@ -129,11 +126,15 @@ Handles calling validation prior to the `onSubmit` handler and setting the

		#### `isSubmitting`
		#### `isSubmitting: boolean`

		Boolean value if the form is currently submitting.

		#### `setErrors()`
		#### `submitCount: number`

		Number of times the form was submitted.

		#### `setErrors: (errors: FormHookErrors<Values>) => void`

		Function that allows for errors to be set outside of the `useForm`
		internal handlers (good for handling request errors).

		[Formik]: https://github.com/jaredpalmer/formik
		[formik]: https://github.com/jaredpalmer/formik

lib/index.js

form-hooks - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics