use-form-input - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.d.ts

		@@ -12,3 +12,3 @@ import * as React from "react";
		message?: string;
		onMatched?: (messages?: string) => void;
		onMatch?: (messages?: string) => void;
		};
		@@ -15,0 +15,0 @@ declare type ValidatorType<T> = (errors: any) => (name: keyof T, config: ValidatorConfigType) => void;

dist/index.js

		@@ -50,3 +50,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
		var _a, _b;
		const { condition, message, onMatched } = config;
		const { condition, message, onMatch } = config;
		if (condition) {
		@@ -68,4 +68,4 @@ errors[name] = {
		}
		if (onMatched) {
		onMatched(message);
		if (onMatch) {
		onMatch(message);
		}
		@@ -72,0 +72,0 @@ }

package.json

		{
		"name": "use-form-input",
		"version": "1.0.1",
		"version": "1.1.0",
		"description": "Simple hook to provide form validation in react",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -5,2 +5,8 @@ # USE-FORM-INPUT

		### Features

		- Small size and no dependencies
		- Fully customizable form handling and validations
		- Easy to use

		### Install
		@@ -14,7 +20,59 @@

		or
		Install with yarn:
		### Quickstart

		```sh
		yarn add use-form-input
		```jsx
		import { useFormInput } from 'use-form-input';

		export default function App() {
		const [data, { onChange, validator, isValid, errors, setErrors }] =
		useFormInput({
		name: 'John Doe',
		});

		const onSubmit = (e: React.FormEvent) => {
		e.preventDefault();

		const cachedErrors = {};
		const validate = validator(cachedErrors);

		const { name } = data;

		validate('name', {
		condition: name.length === 0,
		message: 'Empty name',
		onMatch: function (message) {
		if (message) {
		console.error(message);
		}
		},
		});

		setErrors(cachedErrors);

		if (!isValid(cachedErrors)) {
		return;
		}

		console.log('FINAL DATA', data);
		};

		return (
		<>
		<form onSubmit={onSubmit} style={{ marginLeft: 10 }}>
		<input
		type="text"
		placeholder="name"
		value={data.name}
		onChange={onChange('name')}
		/>
		<p style={{ color: 'red' }}>
		{errors.name &&
		errors.name.messages.length > 0 &&
		errors.name.messages[0]}
		</p>
		<input value="Submit" type="submit" />
		</form>
		</>
		);
		}
		```
		@@ -21,0 +79,0 @@

dist/index.js.map

Sorry, the diff of this file is not supported yet

New alerts