feat: Support hook.

package.json

@@ -5,9 +5,11 @@
     "test": "tsbb test --env=jsdom",
     "coverage": "tsbb test --env=jsdom --coverage",
     "start": "lerna exec \"npm run start\" --scope website",
-    "build:lib": "lerna exec \"npm run build\" --scope validator.tool",
-    "watch:lib": "lerna exec \"npm run start\" --scope validator.tool",
     "build": "lerna exec \"npm run build\" --scope website",
+    "lib:build": "lerna exec \"npm run build\" --scope validator.tool",
+    "lib:watch": "lerna exec \"npm run start\" --scope validator.tool",
+    "hook:build": "lerna exec \"tsbb build\" --scope @validator.tool/hook",
+    "hook:watch": "lerna exec \"tsbb watch\" --scope @validator.tool/hook",
     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
     "bootstrap": "lerna bootstrap",
     "hoist": "lerna bootstrap --hoist"

packages/core/README.md

@@ -13,7 +13,7 @@ Lightweight JavaScript form validation, that had minimal configuration and felt
 
 > ⚠️ The [`v1`](https://raw.githack.com/jaywcjlove/validator.js/v1-doc/index.html) version document preview is [here](https://raw.githack.com/jaywcjlove/validator.js/v1-doc/index.html).
 
-[Install](#install) · [Usage](#usage) · [API](#api) · [npm](http://npm.im/validator.tool) · [License](#license)
+[Install](#install) · [Usage](#usage) · [Hook Support](https://github.com/jaywcjlove/validator.js/tree/master/packages/hook/README.md) · [API](#api) · [npm](http://npm.im/validator.tool) · [License](#license)
 
 ## Install
 
@@ -36,24 +36,19 @@ import { useRef, useState } from 'react';
 import Validator from 'validator.tool';
 
 function Demo() {
+  const [data, setData] = useState({
+    email: '[email protected]'
+  });
   const validator = useRef(new Validator({
+    initValues: data,
     validate: (value, values, field) => {
       if (field === 'password' && !value) {
         return 'Required!';
       }
     }
   }));
-  const [data, setData] = useState({
-    email: '[email protected]'
-  });
   const [upState, forceUpdate] = useState(0);
 
-  useEffect(() => {
-    if (!validator.current.initValues) {
-      validator.current.initValues = data;
-    }
-  }, []);
-
   function handleSubmit(evn) {
     evn && evn.preventDefault();
     validator.current.showMessages();
@@ -87,16 +82,12 @@ function Demo() {
       <div>
         <label htmlFor="password">Password:</label>
         <input type="password" name="password" />
-        <p>
-          {validator.current.message('password', data.password)}
-        </p>
+        <p>{validator.current.message('password', data.password)}</p>
       </div>
       <div>
         <label htmlFor="repassword">Confirm Password:</label>
         <input type="repassword" name="repassword" />
-        <p>
-          {validator.current.message('repassword', data.repassword)}
-        </p>
+        <p>{validator.current.message('repassword', data.repassword)}</p>
       </div>
       <div>
         <button type="submit">Submit</button>
@@ -107,6 +98,17 @@ function Demo() {
 }
 ```
 
+### [Support React Hook](https://github.com/jaywcjlove/validator.js/tree/master/packages/hook/README.md)
+
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@validator.tool/hook)](https://bundlephobia.com/package/@validator.tool/hook)
+[![npm version](https://img.shields.io/npm/v/@validator.tool/hook.svg)](https://www.npmjs.com/package/@validator.tool/hook)
+
+```jsx
+import { useValidator } from '@validator.tool/hook';
+
+const { validator, forceUpdate } = useValidator({});
+```
+
 ### Used in the React Native App
 
 You need to wrap validator with `<Text>` Element.
@@ -256,6 +258,35 @@ export default class Validator {
 }
 ```
 
+## Use with third-party packages
+
+### [validator.js](https://github.com/validatorjs/validator.js)
+
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/validator)](https://bundlephobia.com/package/validator)
+
+String validation
+
+```jsx
+import isEmail from 'validator/es/lib/isEmail';
+
+function Demo() {
+  return (
+    <p>
+      {validator.current.message('email', data.email, {
+        validate: (val) => !isEmail(val) ? `The ${val} must be a valid email address.` : ''
+      })}
+    </p>
+  );
+}
+```
+
+### [Zod](https://github.com/vriad/zod)
+
+TypeScript-first schema validation with static type inference
+
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/zod)](https://bundlephobia.com/package/zod)
+
+
 ## Related
 
 - [chriso/validator.js](https://github.com/chriso/validator.js) String validation

packages/hook/README.md

@@ -0,0 +1,89 @@
+@validator.tool/hook
+===
+
+[![Build & Deploy](https://github.com/jaywcjlove/validator.js/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/validator.js/actions/workflows/ci.yml)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@validator.tool/hook)](https://bundlephobia.com/package/@validator.tool/hook)
+[![npm version](https://img.shields.io/npm/v/@validator.tool/hook.svg)](https://www.npmjs.com/package/@validator.tool/hook)
+[![Coverage Status](https://jaywcjlove.github.io/validator.js/coverage/badges.svg)](https://jaywcjlove.github.io/validator.js/coverage/lcov-report)
+
+Hooks for use with `validator.tool`.
+
+## Install
+
+```bash
+$ npm install @validator.tool/hook --save
+```
+
+## Usage
+
+```jsx
+import { useEffect, useState, Fragment } from 'react';
+import { useValidator } from '@validator.tool/hook';
+
+export default function Demo() {
+  const { validator, forceUpdate } = useValidator({});
+  const [data, setData] = useState({
+    email: '[email protected]'
+  });
+
+  useEffect(() => {
+    if (!validator.initValues) {
+      validator.initValues = { ...data };
+    }
+  }, []);
+
+  function handleSubmit(evn) {
+    evn && evn.preventDefault();
+    validator.showMessages();
+    forceUpdate();
+  }
+
+  function handleReset() {
+    validator.hideMessages();
+    const v = validator.reset();
+    setData({ ...v });
+  }
+
+  function handleChange(env) {
+    const target = env.target;
+    const value = target.type === "checkbox" ? target.checked : target.value;
+    const name = target.name;
+    setData({ ...data, [name]: value });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} onReset={handleReset} onChange={handleChange}>
+      <div>
+        <label htmlFor="email">EMail:</label>
+        <input type="email" name="email" defaultValue={data.email} />
+        <span>
+          {validator.message('email', data.email, {
+            validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
+          })}
+        </span>
+      </div>
+      <div>
+        <label htmlFor="password">Password:</label>
+        <input type="password" name="password" />
+        <span>
+          {validator.message('password', data.password, {
+            validate: (val) => !val ? 'Please enter the password!' : ''
+          })}
+        </span>
+      </div>
+      <div style={{ width: '100%' }}>
+        <button type="submit">Submit</button>
+        <button type="reset">Reset</button>
+      </div>
+    </form>
+  );
+}
+```
+
+## Related
+
+- [validator.tool](https://github.com/jaywcjlove/validator.js) Lightweight JavaScript form validation, that had minimal configuration and felt natural to use.
+
+## License
+
+Licensed under the [MIT License](https://opensource.org/licenses/MIT).

packages/hook/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@validator.tool/hook",
+  "version": "2.0.0",
+  "description": "Hooks for use with `validator.tool`.",
+  "homepage": "http://jaywcjlove.github.io/validator.js",
+  "author": "kenny wang <[email protected]> (https://github.com/jaywcjlove)",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jaywcjlove/validator.js"
+  },
+  "keywords": [
+    "hook",
+    "validator",
+    "validator.tool",
+    "validator.js",
+    "validation",
+    "validate",
+    "sanitization",
+    "sanitize",
+    "sanitisation",
+    "sanitise",
+    "assert"
+  ],
+  "files": [
+    "cjs",
+    "esm",
+    "dist"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "validator.tool": "2.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.15.4",
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.10",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}

packages/hook/src/index.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState, useRef } from 'react';
+import Validator, { ValidatorOption } from 'validator.tool';
+
+export interface UseValidator extends ValidatorOption {}
+export function useValidator(props: UseValidator = {}) {
+  const validator = useRef<Validator>(new Validator({ ...props }));
+  const [upState, forceUpdate] = useState(0);
+
+  useEffect(() => {
+    if (validator.current && props.form) {
+      validator.current.setForm(props.form);
+    }
+  }, [props.form, validator.current]);
+
+  const handleForceUpdate = () => forceUpdate(upState + 1);
+  // return { ...validator.current, forceUpdate: handleForceUpdate };
+  return {
+    validator: validator.current,
+    forceUpdate: handleForceUpdate
+  }
+}

packages/hook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "cjs",
+    "baseUrl": ".",
+    "noEmit": false
+  }
+}