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.
Don't hesitate to give me a star.
Online Demo codesandbox ReactJs
Online Demo Snack Expo React Native
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. I'm just referencing the props name so that I don't have to think about naming and to be able to think of the cases this library needs to handle. But I don't use their code. You can also fork back and edit as you like.
Don't hesitate to give me a star.
npm install react-cee-form --saveimport React, { useState } from 'react';
import { useForm, Field, joiResolver } from 'react-cee-form';
import Input from './Input';
function App() {
const control = useForm();
const { errors, handleSubmit, setValue, values, register } = control;
console.log('control', control?.values);
const onSubmit = (values) => {
console.log('submit', values);
};
// const onChangeIp2 = (ev) => setValue('password', ev.target.value, { shouldValidate: false });
const onChangeIp2 = (ev) => setValue('password', ev.target.value);
// we have 2 ways to use with component: use Field or register()
return (
<div className="App">
// fist way: use Field
<Field
name='userName'
control={control}
rules={{
required: true,
min: 15,
max: 20,
validate: (value) => value?.length > 5 ? 'Length is over 5 letter' : null
}}
>
{({ onChange, value = '', name }) => (
<Input
control={control}
onChange={onChange}
value={value}
errors={errors}
name={name}
title='User name' />
)}
</Field>
// second way: register()
<div>
<div>Display Name</div>
<input {...register('displayName', { required: true, })} />
<div>{errors?.displayName}</div>
</div>
<div>
<div>Password</div>
<input {...register('password', { required: true, })} onChange={onChangeIp2} value={values?.password || ''} />
<div>{errors?.password}</div>
</div>
<div onClick={handleSubmit(onSubmit)}>onSubmit</div>
</div>
);
}
export default App;useForm is custom hook, it manages the form state and the form control.
import { useForm, joiResolver } from 'react-cee-form';
useForm({
validationSchema: joiResolver(schema), // use with joi validation
defaultValues: {}
});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.
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>Beside using the validation rules, you can use the validation function. Now we support schema-based form validation with Joi Validation
For example:
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) }); const { errors, handleSubmit, setValue, values, register, ...restProps } = useForm();register the field to the form control
register(fieldName, fieldRules, defaultValue)
unRegister the field from the form control
unRegister(fieldName)
set the value of the field
setValue(fieldName, value, conditions = { shouldValidate: true })
the values of the form
get the values of the form
getValues(fieldName)
the errors of the form
set the errors of the form
setError(fieldName, error)
get the errors of the form
getError(fieldName)
clear the errors of the form
clearError(fieldName)
reset the form
reset({fieldName: value, ...})
trigger to validate one or more fields
trigger([fieldName, ...])
handle the submit event, it needs to wrap onClick event of the submit button.
const onSubmit = (values) => {
console.log('submit', values);
}
handleSubmit(onSubmit)
Pull requests are welcome!