react-cee-form - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "react-cee-form",
-  "version": "0.0.2",
-  "description": "",
+  "version": "0.0.3",
+  "description": "Simple validation library for React and React Native",
   "main": "dist/index.js",
@@ -11,20 +11,22 @@ "module": "dist/index.es.js",
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hungdev/react-cee-form.git"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "homepage": "https://github.com/hungdev/react-cee-form#readme",
+  "bugs": {
+    "url": "https://github.com/hungdev/react-cee-form/issues"
   },
+  "author": "<[e-mail]>",
+  "license": "MIT",
+  "keywords": [
+    "validation",
+    "form",
+    "hooks",
+    "react-hooks",
+    "react",
+    "react-native",
+    "form-validation",
+    "forms"
+  ],
   "devDependencies": {
@@ -31,0 +33,0 @@ "@babel/core": "^7.18.5",

README.md

@@ -1,8 +0,12 @@
-# React Simple Validation
-inspired by react hook form and props name and rewritten in a simple way.
+# React Cee Form
+Inspired by react hook form and their props name and rewritten in a simple way.
 
-it can be used for both react native and reactjs.
+It can be used for both React Native and ReactJs.
 
-Don't hesitate to give me a star.
+> Don't hesitate to give me a star.
 
+[Online Demo codesandbox ReactJs](https://codesandbox.io/s/react-cee-form-example-6b3x29)
+
+[Online Demo Snack Expo React Native](https://snack.expo.dev/@hungdev/react-cee-form-example)
+
 ## Why don't use react-hook-form
@@ -15,45 +19,14 @@ I had some problems in react-hook-form and I couldn't handle it, and I decided to write my own. The library is in its basic form, simple and has the same basic features as the hook-form side.
 
+## Install
+```js
+npm install react-cee-form --save
+```
+
 ## Usage:
-```
+```javascript
 import React, { useState } from 'react';
-import useForm from './Form';
-import Field from './Field';
+import { useForm, Field, joiResolver } from 'react-cee-form';
 import Input from './Input';
-import { joiResolver } from './utils';
 
-const schema = Joi.object({
-  userName: Joi.string()
-    .min(5)
-    .max(10)
-    .required()
-    .messages({
-      "string.base": `"username" should be a type of 'text' joiiiii`,
-      "string.empty": `"username" cannot be an empty field joiiiii`,
-      "string.min": `"username" should have a minimum length of {#limit} joiiiii`,
-      "string.max": `"username" should have a maximum length of {#limit} joiiiii`,
-      "any.required": `"username" is a required field joiiiii`
-    }),
-  displayName: Joi.string().min(5)
-    .max(10)
-    .required()
-    .messages({
-      "string.base": `"displayName" should be a type of 'text' joiiiii`,
-      "string.empty": `"displayName" cannot be an empty field joiiiii`,
-      "string.min": `"displayName" should have a minimum length of {#limit} joiiiii`,
-      "string.max": `"displayName" should have a maximum length of {#limit} joiiiii`,
-      "any.required": `"displayName" is a required field joiiiii`
-    })
-    .custom((value, helper) => {
-      if (value.length < 8) {
-        return helper.message("lastName must be at least 8 characters long");
-      } else {
-        return true;
-      }
-
-    }),
-  book: Joi.array().min(1),
-});
-
 function App() {
-    // const control = useForm({ validationSchema: joiResolver(schema) }); // use with joi validation
   const control = useForm();
@@ -74,2 +47,4 @@ const { errors, handleSubmit, setValue, values, register } = control;
     <div className="App">
+
+      // fist way: use Field
       <Field
@@ -96,2 +71,3 @@ name='userName'
 
+      // second way: register()
       <div>
@@ -115,1 +91,202 @@ <div>Display Name</div>
 ```
+
+## API
+
+### useForm
+useForm is custom hook, it manages the form state and the form control.
+
+```js
+import { useForm, joiResolver } from 'react-cee-form';
+
+useForm({
+  validationSchema: joiResolver(schema), // use with joi validation
+  defaultValues: {}
+});
+```
+
+### Field
+Field is a component that manages the form control. It wraps the component and the error message.
+
+For react native need it to control your component.
+
+It has some props:
+- name: the name of the field. The form will use this name to set the value to the form control.
+- control: the control object that manages the form state and the form control
+- rules: the validation rules. 
+
+**List of validation rules supported:**
+- required: true/false or `{value: true/false, message: 'error message'}`
+- min: number or `{value: number, message: 'error message'}`
+- max: number or `{value: number, message: 'error message'}`
+- minLength: number or `{value: number, message: 'error message'}`
+- maxLength: number or `{value: number, message: 'error message'}`
+- pattern: string or `{value: string, message: 'error message'}`
+- validate: function that returns a string or null
+
+Children is a function that returns the component. It receives the props:
+- onChange: function that handles the change event, it sets value to the form control.
+- value: the value of the component.
+- name: the name of the component.
+- onBlur: function that handles the blur event, it validates the component.
+
+> 
+
+```js
+import { Field, useForm } from 'react-cee-form';
+
+<Field
+    name='fieldName'
+    control={control}
+    rules={{
+      required: true,
+      min: 15,
+      max: 20,
+      validate: (value) => {}
+    }}
+  >
+    {({ onChange, value = '', name, onBlur }) => (
+      <Input
+        control={control}
+        onChange={onChange}
+        value={value}
+        errors={errors}
+        name={name}
+        title='' />
+    )}
+</Field>
+```
+
+### Validation:
+Beside using the validation rules, you can use the validation function. Now we support schema-based form validation with [Joi Validation](https://joi.dev/)
+
+
+For example:
+```js
+import { useForm, joiResolver } from 'react-cee-form';
+import Joi from 'joi';
+
+const schema = Joi.object({
+  userName: Joi.string()
+    .min(5)
+    .max(10)
+    .required()
+    .messages({
+      "string.base": `"username" should be a type of 'text' joiiiii`,
+      "string.empty": `"username" cannot be an empty field joiiiii`,
+      "string.min": `"username" should have a minimum length of {#limit} joiiiii`,
+      "string.max": `"username" should have a maximum length of {#limit} joiiiii`,
+      "any.required": `"username" is a required field joiiiii`
+    }),
+  displayName: Joi.string().min(5)
+    .max(10)
+    .required()
+    .messages({
+      "string.base": `"displayName" should be a type of 'text' joiiiii`,
+      "string.empty": `"displayName" cannot be an empty field joiiiii`,
+      "string.min": `"displayName" should have a minimum length of {#limit} joiiiii`,
+      "string.max": `"displayName" should have a maximum length of {#limit} joiiiii`,
+      "any.required": `"displayName" is a required field joiiiii`
+    })
+    .custom((value, helper) => {
+      if (value.length < 8) {
+        return helper.message("lastName must be at least 8 characters long");
+      } else {
+        return true;
+      }
+    }),
+  book: Joi.array().min(1),
+});
+
+
+const control = useForm({ validationSchema: joiResolver(schema) }); 
+```
+
+
+### Properties
+
+```js
+const { errors, handleSubmit, setValue, values, register, ...restProps } = useForm();
+```
+
+#### register: 
+register the field to the form control
+
+```
+register(fieldName, fieldRules, defaultValue)
+```
+
+#### unRegister: 
+unRegister the field from the form control
+
+```
+unRegister(fieldName)
+```
+
+#### setValue: 
+set the value of the field
+
+```
+setValue(fieldName, value, conditions = { shouldValidate: true })
+```
+
+#### values: 
+the values of the form
+
+#### getValues: 
+get the values of the form
+
+```
+getValues(fieldName)
+```
+
+#### errors: 
+the errors of the form
+
+#### setError: 
+set the errors of the form
+
+```
+setError(fieldName, error)
+```
+
+#### getError: 
+get the errors of the form
+
+```
+getError(fieldName)
+```
+
+#### clearError: 
+clear the errors of the form
+
+```
+clearError(fieldName)
+```
+
+#### reset: 
+reset the form
+
+```
+reset({fieldName: value, ...})
+```
+
+#### trigger: 
+trigger to validate one or more fields
+
+```
+trigger([fieldName, ...])
+```
+
+#### handleSubmit: 
+handle the submit event, it needs to wrap onClick event of the submit button.
+
+```
+const onSubmit = (values) => {
+  console.log('submit', values);
+}
+
+handleSubmit(onSubmit)
+```
+
+### Pull request
+Pull requests are welcome!

src/Validate.js

@@ -0,36 +1,61 @@
+
 export const validateField = (name, val, rules) => {
   let error = null;
+  // required
   if (rules?.required) {
-    error = !val && `Field ${name} is required`;
+    let condition = rules?.required?.value || rules?.required;
+    let message = rules?.required?.message || `Field ${name} is required`;
+    error = !val && condition && message;
   }
 
+  // pattern
   if (rules?.pattern) {
-    error = !rules?.pattern.test(val) && `Field ${name} is invalid`;
+    let condition = rules?.pattern?.value || rules?.pattern;
+    let message = rules?.pattern?.message || `Field ${name} is invalid`;
+    error = val && !condition.test(val) && message;
   }
 
+  // min & max
   if (!error && rules?.min && rules?.max) {
-    error = (Number(val) < rules?.min || Number(val) > rules?.max) && `Field ${name} must be between ${rules?.min} and ${rules?.max}`;
+    let minCondition = rules?.min?.value || rules?.min;
+    let maxCondition = rules?.max?.value || rules?.max;
+    error = (Number(val) < minCondition || Number(val) > maxCondition) && `Field ${name} must be between ${minCondition} and ${maxCondition}`;
   }
 
+  // min
   if (!error && rules?.min) {
-    error = Number(val) < rules?.min && `Field ${name} is too short`;
+    let condition = rules?.min?.value || rules?.min;
+    let message = rules?.min?.message || `Field ${name} is smaller than ${condition}`;
+    error = val && Number(val) < condition && message;
   }
 
+  // max
   if (!error && rules?.max) {
-    error = Number(val) > rules?.max && `Field ${name} is too long`;
+    let condition = rules?.max?.value || rules?.max;
+    let message = rules?.max?.message || `Field ${name} is higher than ${condition}`;
+    error = val && Number(val) > condition && message;
   }
 
+  // minLength & maxLength
   if (!error && rules?.minLength && rules?.maxLength) {
-    error = (val?.length < rules?.minLength || val?.length > rules?.maxLength) && `Field ${name} must be between ${rules?.minLength} and ${rules?.maxLength}`;
+    let minLengthCondition = rules?.minLength?.value || rules?.minLength;
+    let maxLengthCondition = rules?.maxLength?.value || rules?.maxLength;
+    error = (val?.length < minLengthCondition || val?.length > maxLengthCondition) && `Field ${name} must be between ${minLengthCondition} and ${maxLengthCondition}`;
   }
 
+  // minLength
   if (!error && rules?.minLength) {
-    error = val?.length < rules?.minLength && `Field ${name} is too short`;
+    let condition = rules?.minLength?.value || rules?.minLength;
+    let message = rules?.minLength?.message || `Field ${name} is too short`;
+    error = val?.length < condition && message;
   }
 
+  // maxLength
   if (!error && rules?.maxLength) {
-    error = val?.length > rules?.maxLength && `Field ${name} is too long`;
+    let condition = rules?.maxLength?.value || rules?.maxLength;
+    let message = rules?.maxLength?.message || `Field ${name} is too long`;
+    error = val?.length > condition && message;
   }
 
-
+  // validate
   if (!error && rules?.validate) {
@@ -37,0 +62,0 @@ error = rules?.validate?.(val);

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43146

increased by12.39%

Number of low license alerts

0

decreased by-100%

Lines of code

261

increased by10.59%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

288

increased by157.14%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

16

decreased by-5.88%

No dependency changes