New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
use-state-validate
Advanced tools
use-state-validate - npm Package Compare versions
Comparing version 2.5.9 to 3.0.0-alpha.0
| { | ||
| "name": "use-state-validate", | ||
| "version": "2.5.9", | ||
| "version": "3.0.0-alpha.0", | ||
| "description": "Custom hook to account for state and validation off single state value", | ||
@@ -30,16 +30,16 @@ "license": "MIT", | ||
| "files": [ | ||
| "dist/index.js", | ||
| "dist/index.d.ts", | ||
| "types/index.d.ts" | ||
| "lib/index.js", | ||
| "lib/index.d.ts" | ||
| ], | ||
| "main": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "main": "lib/index.js", | ||
| "types": "lib/index.d.ts", | ||
| "scripts": { | ||
| "build": "npm run clean && npm run build:compile && sleep 2 && npm run build:minify", | ||
| "build:compile": "tsc --project tsconfig-prod.json", | ||
| "build:minify": "uglifyjs --compress --mangle --output ./dist/index.js -- ./dist/index.js", | ||
| "clean": "rm -rf dist _stage", | ||
| "stage": "npm run clean && ./cli/stage.sh", | ||
| "release:patch": " npm test && npm run build && npm login && npm version patch && npm publish", | ||
| "release:minor": " npm test && npm run build && npm login && npm version minor && npm publish", | ||
| "build": "./ci/build.sh", | ||
| "clean": "rm -rf lib _stage", | ||
| "prep-pub_COMMENT": "// >[FIX]<: add test command", | ||
| "prep-pub": "npm run build && npm login", | ||
| "publish:prepatch": "npm run prep-pub && npm version prepatch --preid alpha && npm publish --tag alpha", | ||
| "publish:premajor": "npm run prep-pub && npm version premajor --preid alpha && npm publish --tag alpha", | ||
| "release:patch": "npm run prep-pub && npm version patch && npm publish", | ||
| "release:minor": "npm run prep-pub && npm login && npm version minor && npm publish", | ||
| "prepublish": "npm run build", | ||
@@ -49,27 +49,27 @@ "test": "jest" | ||
| "devDependencies": { | ||
| "@testing-library/react": "^11.0.2", | ||
| "@types/jest": "^26.0.13", | ||
| "@types/react": "^16.9.49", | ||
| "@typescript-eslint/eslint-plugin": "^4.0.1", | ||
| "@typescript-eslint/parser": "^4.0.1", | ||
| "eslint": "^7.8.1", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-config-standard": "^14.1.1", | ||
| "eslint-plugin-import": "^2.22.0", | ||
| "eslint-plugin-jest": "^24.0.0", | ||
| "eslint-plugin-jsx-a11y": "^6.3.1", | ||
| "@testing-library/react": "^11.2.7", | ||
| "@types/jest": "^26.0.24", | ||
| "@types/react": "^16.14.34", | ||
| "@typescript-eslint/eslint-plugin": "^5.42.1", | ||
| "@typescript-eslint/parser": "^5.42.1", | ||
| "eslint": "^8.27.0", | ||
| "eslint-config-prettier": "^8.5.0", | ||
| "eslint-config-standard": "^17.0.0", | ||
| "eslint-plugin-import": "^2.26.0", | ||
| "eslint-plugin-jest": "^27.1.4", | ||
| "eslint-plugin-jsx-a11y": "^6.6.1", | ||
| "eslint-plugin-node": "^11.1.0", | ||
| "eslint-plugin-prettier": "^3.1.4", | ||
| "eslint-plugin-promise": "^4.2.1", | ||
| "eslint-plugin-standard": "^4.0.1", | ||
| "eslint-plugin-prettier": "^4.2.1", | ||
| "eslint-plugin-promise": "^6.1.1", | ||
| "eslint-plugin-standard": "^5.0.0", | ||
| "husky": "^4.3.8", | ||
| "jest": "^26.4.2", | ||
| "jest": "^26.6.3", | ||
| "lint-staged": "^10.5.4", | ||
| "prettier": "^2.1.1", | ||
| "prettier": "^2.7.1", | ||
| "react": "^16.14.0", | ||
| "react-dom": "^16.14.0", | ||
| "ts-jest": "^26.3.0", | ||
| "tslib": "^2.0.1", | ||
| "typescript": "^4.0.2", | ||
| "uglify-js": "^3.10.3" | ||
| "ts-jest": "^26.5.6", | ||
| "tslib": "^2.4.1", | ||
| "typescript": "^4.8.4", | ||
| "uglify-js": "^3.17.4" | ||
| }, | ||
@@ -76,0 +76,0 @@ "peerDependencies": { |
@@ -21,5 +21,3 @@ # use-state-validate | ||
| ## Summary | ||
| This package contains a custom hook that blends `useState` and field validation. `useStateValidate` is focused on the | ||
| validation of single state values in your form and does not try to handle all of the form logic. My motivation was to | ||
| create a clean and terse pattern for dealing with state validation in react. There are MANY libraries and packages out there, but none have resonated with me just yet. So here we are... Enjoy and I hope this helps you in your next project. Please reach out to me or throw an issue on my gitlab if you have any troubles 😀 | ||
| This package contains a custom hook that blends `useState` and field validation. `useStateValidate` is focused on the validation of single state values in your form and does not try to handle all of the form logic. My motivation was to create a clean and terse pattern for dealing with state validation in react. There are MANY libraries and packages out there, but none have resonated with me just yet. So here we are... Enjoy and I hope this helps you in your next project. Please reach out to me or throw an issue on my gitlab if you have any troubles 😀 | ||
@@ -43,13 +41,28 @@ ### Code | ||
| const [`<valWrap>`, `<setVal>`, `<cleanVal>`] = useStateValidate(`<initVal>`, `<rules>`) | ||
| const [`<fieldStates>`, `<fieldActions>`] = useStateValidate(`<initVal>`, `<rules>`) | ||
| `fieldStates` - An object wrapping the value and relevant flags | ||
| * `value` - The actual value (think the first tuple in setState) | ||
| * `name` - The name configured in the rules object, handy for applying to input labels. | ||
| * `isDirty` - (Default: false) - Flag for a field change | ||
| * `isRequired` - (Default: false) - Flag taken from the rules object, can be useful for annotating field objects. | ||
| * `isValid` - true if the value passes the rule object's validation, false if it does not | ||
| * `errors` - a string array of messages corresponding to failed validation rules. | ||
| | | | | ||
| | -------------- | ---- | | ||
| | `valWrap` | An object containing the raw value and validation data, use `<valWrap>`.`value` to get the value | | ||
| | `setVal` | Set function, that behaves like `useState`. PLEASE PASS THE RAW VALUE HERE, not a wrapper like object! | | ||
| | `cleanVal` | Function to clean the dirty flag. The dirty flag defaults to false, but is set to true if `setVal` is invoked | | ||
| | `initVal` | The initial value to start with | | ||
| | `rules` | A mostly flat object using rules found at https://www.npmjs.com/package/validate | | ||
| `fieldActions` - An object wrapping the value and relevant flags | ||
| * `setValue` - Sets the value, marks the field as dirty, applies validation rules and causes a re-render (via setState) | ||
| * `setClean` - Manually marks the field as clean and causes a re-render (via setState) | ||
| * `setDirty` - Manually marks the field as dirty and causes a re-render (via setState) | ||
| | | | | ||
| | --------------- | ---- | | ||
| | `fieldStates` | An object containing the raw value and validation data, use `<valWrap>`.`value` to get the value | | ||
| | `fieldActions` | Set function, that behaves like `useState`. PLEASE PASS THE RAW VALUE HERE, not a wrapper like object! | | ||
| | `cleanVal` | Function to clean the dirty flag. The dirty flag defaults to false, but is set to true if `setVal` is invoked | | ||
| | `initVal` | The initial value to start with | | ||
| | `rules` | A mostly flat object using rules outlined in this readme | | ||
| ### Rule Examples | ||
@@ -83,3 +96,3 @@ ``` | ||
| "type": "string", | ||
| "errorMessages": [ | ||
| "errors": [ | ||
| "Error Message 1", | ||
@@ -135,13 +148,2 @@ "Error Message 2" | ||
| ### Type | ||
| Validation requires values to match the provided type. | ||
| ```js | ||
| { | ||
| type: "string" | ||
| message: { | ||
| type: "You must enter a string value!", | ||
| } | ||
| } | ||
| ``` | ||
| ### Length | ||
@@ -148,0 +150,0 @@ Validation requires values to match the provided type. |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by0.94%
215
Worsened metrics
- Total package byte prevSize
- decreased by-16.01%
12225
- Number of package files
- decreased by-20%
4
- Lines of code
- decreased by-54%
46
- Number of low quality alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes