reactidate
Advanced tools
reactidate - npm Package Compare versions
Comparing version 1.0.7 to 1.0.8
| import React from "react"; | ||
| type RuleInfo = { | ||
| type RuleEntries = { | ||
| Required?: boolean, | ||
@@ -11,6 +11,10 @@ Email?: boolean, | ||
| export interface Rules extends Record<string, RuleEntries>{ | ||
| [key: string]: RuleEntries | ||
| } | ||
| export declare function useValidate(options?: useValidate.Options): (rulesStateMethod: React.Dispatch<any>, rulesState: Record<string, RuleInfo>, valueState: Record<string, string | number>) => boolean; | ||
| export declare function useValidate(options?: useValidate.Options): (rStateFunc: React.Dispatch<any>, rState: Rules, vState: Record<string, string|number|boolean|any>) => boolean; | ||
| declare namespace useValidate { | ||
@@ -23,5 +27,2 @@ export interface Options { | ||
| export interface Rules extends Record<string, RuleInfo>{ | ||
| [key: string]: RuleInfo | ||
| } | ||
@@ -28,0 +29,0 @@ export declare const Email: boolean | true; |
@@ -1,18 +0,53 @@ | ||
| const c = !0, m = !0, h = (n) => n, $ = (n) => new RegExp("/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*.?[a-zA-Z0-9])*.[a-zA-Z](-?[a-zA-Z0-9])+$/").test(n), f = (n, s) => String(n).replace(String(n).charAt(0), String(n).charAt(0).toUpperCase()) + (s || " is invalid"); | ||
| function A(n) { | ||
| return (s, e, i) => { | ||
| let o = !0; | ||
| const g = Object.keys(i); | ||
| if (g.length <= 0) | ||
| const g = !0, c = !0, f = (r) => r, u = (r) => new RegExp("/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*.?[a-zA-Z0-9])*.[a-zA-Z](-?[a-zA-Z0-9])+$/").test(r), a = (r, i) => String(r).replace(String(r).charAt(0), String(r).charAt(0).toUpperCase()) + (i || " is invalid"), l = (r, i, e, t) => { | ||
| let s = !0; | ||
| r[i].$error = !1; | ||
| for (let o = 0; o < e.length; o++) | ||
| if (e[o]) { | ||
| r[i].$error = !0, r[i].$message = a(i, t), s = !1; | ||
| break; | ||
| } | ||
| return s; | ||
| }; | ||
| function h(r) { | ||
| return (i, e, t) => { | ||
| let s = !0; | ||
| const o = Object.keys(e); | ||
| if (Object.keys(e).length <= 0) | ||
| throw new Error("no field detected in state"); | ||
| for (const r of g) | ||
| "Email" in e[r] && (i[r] == "" ? (e[r].$error = !0, e[r].$message = f(r), o = !1) : e[r].$error = !1, $(i[r]) ? e[r].$error = !1 : (e[r].$error = !0, e[r].$message = f(r), o = !1)), "Required" in e[r] && (i[r] == "" || i[r] == null ? (e[r].$error = !0, e[r].$message = f(r), o = !1) : e[r].$error = !1), "Length" in e[r] && (i[r] == "" || i[r] == null ? (e[r].$error = !0, e[r].$message = f(r), o = !1) : e[r].$error = !1, String(i[r]).length < Number(e[r].Length) ? (e[r].$error = !0, e[r].$message = f(r, ` must be equal to or greater than ${Number(e[r].Length)}`), o = !1) : e[r].$error = !1); | ||
| return s({ ...e }), o; | ||
| for (const n of o) | ||
| "Email" in e[n] && (s = l( | ||
| e, | ||
| n, | ||
| [ | ||
| t[n] == "", | ||
| !u(t[n]) | ||
| ] | ||
| )), "Required" in e[n] && (s = l( | ||
| e, | ||
| n, | ||
| [ | ||
| t[n] == "" | ||
| ] | ||
| )), "Length" in e[n] && (s = l( | ||
| e, | ||
| n, | ||
| [ | ||
| t[n] == "" | ||
| ] | ||
| ), s = l( | ||
| e, | ||
| n, | ||
| [ | ||
| String(t[n]).length < Number(e[n].Length) | ||
| ], | ||
| ` must be equal to or greater than ${Number(e[n].Length)}` | ||
| )); | ||
| return i({ ...e }), s; | ||
| }; | ||
| } | ||
| export { | ||
| m as Email, | ||
| c as Required, | ||
| h as minLength, | ||
| A as useValidate | ||
| c as Email, | ||
| g as Required, | ||
| f as minLength, | ||
| h as useValidate | ||
| }; |
@@ -1,1 +0,1 @@ | ||
| (function(i,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(i=typeof globalThis<"u"?globalThis:i||self,d(i.reactidate={}))})(this,function(i){"use strict";const c=r=>r,$=r=>new RegExp("/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*.?[a-zA-Z0-9])*.[a-zA-Z](-?[a-zA-Z0-9])+$/").test(r),f=(r,g)=>String(r).replace(String(r).charAt(0),String(r).charAt(0).toUpperCase())+(g||" is invalid");function t(r){return(g,n,o)=>{let s=!0;const m=Object.keys(o);if(m.length<=0)throw new Error("no field detected in state");for(const e of m)"Email"in n[e]&&(o[e]==""?(n[e].$error=!0,n[e].$message=f(e),s=!1):n[e].$error=!1,$(o[e])?n[e].$error=!1:(n[e].$error=!0,n[e].$message=f(e),s=!1)),"Required"in n[e]&&(o[e]==""||o[e]==null?(n[e].$error=!0,n[e].$message=f(e),s=!1):n[e].$error=!1),"Length"in n[e]&&(o[e]==""||o[e]==null?(n[e].$error=!0,n[e].$message=f(e),s=!1):n[e].$error=!1,String(o[e]).length<Number(n[e].Length)?(n[e].$error=!0,n[e].$message=f(e,` must be equal to or greater than ${Number(n[e].Length)}`),s=!1):n[e].$error=!1);return g({...n}),s}}i.Email=!0,i.Required=!0,i.minLength=c,i.useValidate=t,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); | ||
| (function(r,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r.reactidate={}))})(this,function(r){"use strict";const f=n=>n,a=n=>new RegExp("/^[-!#$%&'*+/0-9=?A-Z^_a-z{|}~](.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*.?[a-zA-Z0-9])*.[a-zA-Z](-?[a-zA-Z0-9])+$/").test(n),c=(n,t)=>String(n).replace(String(n).charAt(0),String(n).charAt(0).toUpperCase())+(t||" is invalid"),d=(n,t,e,o)=>{let s=!0;n[t].$error=!1;for(let u=0;u<e.length;u++)if(e[u]){n[t].$error=!0,n[t].$message=c(t,o),s=!1;break}return s};function g(n){return(t,e,o)=>{let s=!0;const u=Object.keys(e);if(Object.keys(e).length<=0)throw new Error("no field detected in state");for(const i of u)"Email"in e[i]&&(s=d(e,i,[o[i]=="",!a(o[i])])),"Required"in e[i]&&(s=d(e,i,[o[i]==""])),"Length"in e[i]&&(s=d(e,i,[o[i]==""]),s=d(e,i,[String(o[i]).length<Number(e[i].Length)],` must be equal to or greater than ${Number(e[i].Length)}`));return t({...e}),s}}r.Email=!0,r.Required=!0,r.minLength=f,r.useValidate=g,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); |
| { | ||
| "name": "reactidate", | ||
| "private": false, | ||
| "version": "1.0.7", | ||
| "version": "1.0.8", | ||
| "type": "module", | ||
@@ -17,3 +17,3 @@ "scripts": { | ||
| }, | ||
| "dependencies": { | ||
| "peerDependencies": { | ||
| "react": "^18.2.0", | ||
@@ -20,0 +20,0 @@ "react-dom": "^18.2.0" |
@@ -23,5 +23,56 @@ # Reactidate | ||
| # Usage | ||
| Using `reactidate` in react applications is super following the code sample below | ||
| ```jsx | ||
| import { useRef, useState } from "react"; | ||
| import {useValidate, Required, Email, minLength} from "reactidate"; | ||
| function App(){ | ||
| const $validate = useValidate({multiple: true}) | ||
| const rules = { | ||
| email: {Required, Email}, | ||
| password: {Required, minLength: minLength(6)}, | ||
| } | ||
| const formdata = useRef({email: "", password: ""}); | ||
| const [formRules, setFormRules] = useState(rules); | ||
| const Submit = (ev: any) =>{ | ||
| ev.preventDefault() | ||
| let valid = $validate(setFormRules, formRules, formdata.current); | ||
| if(!valid){ | ||
| return; | ||
| } | ||
| // other process and api request code | ||
| } | ||
| } | ||
| ``` | ||
| > Note: that the code sample above implements the useRef Hook to store the state of the form data. useState can also be used. | ||
| The template will look like the code below | ||
| ```jsx | ||
| <div > | ||
| <input onChange={(e) => formdata.current.email = e.currentTarget.value} type="email" className={formRules.email?.$error ? 'red': ''} /> | ||
| { !!formRules.email?.$error && <span>{formRules.email?.$message}</span> } | ||
| </div> | ||
| ``` | ||
| `useValidate` hook and the `$validate` function call are the two important aspect of the code above. | ||
| `useValidate` takes an `options` with the following params | ||
| | Params | type | description | | ||
| |--------|:----:|--------:| | ||
| | multiple | boolean (default: `true`) | Specifies if validator should stop on error seen for a single form element | | ||
| | | | | | ||
| ## License | ||
| The MIT License (MIT). Please see [License File](LICENSE.md) for more information. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by22.43%
8798
- Lines of code
- increased by75.56%
79
- Number of lines in readme file
- increased by196.15%
77
Dependency changes
- Removedreact@^18.2.0
- Removedreact-dom@^18.2.0