Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0529bill/react-client-validation
https://github.com/0529bill/react-client-validation
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/0529bill/react-client-validation
- Owner: 0529bill
- License: mit
- Created: 2022-06-30T02:07:23.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-16T07:45:11.000Z (over 1 year ago)
- Last Synced: 2024-09-19T03:23:53.968Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-client-validation
- Size: 645 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-components - react-client-validation - Simple and super lightweight validation for React. (Code Design / Form Logic)
- fucking-awesome-react-components - react-client-validation - Simple and super lightweight validation for React. (Code Design / Form Logic)
README
# React-Client-Validation
[](https://badge.fury.io/js/react-client-validation)
## Installation
```js
npm i react-client-validation
```
or use CDN
```js
```
## Working example
[Codesandbox](https://codesandbox.io/s/react-client-validarion-example-zo1gr3?file=/src/App.js)
## Quick start
```js
import handleValidation from 'react-client-validation'
const loginValidation = [
{
index: 'username',
condition: [!username],
errorMessage: 'User name is not valid!',
},
{
index: 'password',
//change errorObject's format
errorFormat: ['invalidPassword'],
customCondition: (data, errorReturnArray) => {
if (data.password) {
errorReturnArray.push(false)
}
},
},
]
const [isPass, loginErrorObject] = handleValidation({
errorArray: loginValidation,
defaultErrorMessage: "input can't be blank",
})
```
```js
console.log(isPass); // boolean, true or false
console.log(loginErrorObject);
{
username: {msg: 'User name is not valid!'},
password: [ invalidPassword: {msg: "input can't be blank"}]
//password's value is formatted based on errorFormat from the errorArray
}
```
## Basic Props
1. defaultMessage: string: if errorMessage is not found for the index, then defaultMessage will be applied to its return error message.
2. dataSource: any (is isRequired if using customCondition)
3. errorArray: Array (isRequired)
- condition: (string | number | boolean | undefined | null)[] (pick one between condition or customCondition)
- customCondition: Function (pick one between condition or customCondition): (dataSource, returnArray) => [true, false....]
- index: string (isRequired): will be the key for the return error Object.
- errorMessage: string: will be the value for the return error message.
- errorFormat: Array (only allowed when using customCondition) set custom format.
## Example
### errorFormat
```js
//errorFormat example
//only allowed when using customCondition
1. without errorFormat
{ ...,
customCondition: ...,
}
//returned error object
{
username: {msg:'User name is not valid!'}
}
2. with errorFormat
//scenario 1
{
...,
errorFormat: ['test'],
customCondition: ...,
}
//returned error object
{
username: {test: {msg:'User name is not valid!'} }
}
//scenario 2
// 'index' will return the current index.
{
...,
errorFormat: ['test', 'index'],
customCondition: ...,
}
//returned error object
{
username: {test: { 0: { msg: 'User name is not valid!'} } }
}
```
### customCondition
```js
//customCondition example
/**
when using customCondition,
push boolean to the errorReturnArray from customCondition
push true if the current condition passed, otherwise push false
**/
{...,
customCondition: (data, errorReturnArray) => {
if (!data.password) {
errorReturnArray.push(false)
// validation failed, will get fail message from the return error object
}
}
}
```
## Contract Me
[Github](https://github.com/0529bill/react-client-validation)
Email [email protected]
## License
Released under [MIT License](LICENSE.md).