@mohsensami/react-form
v1.0.1
Published
A customizable React hook for forms.
Downloads
10
Readme
Modal React
Manual Setup
Demo
Installation
To use the Modal component, you need to have a React environment set up. You can then add the Modal component files to your project.
The package can be installed via npm:
npm install @mohsensami/react-hook-form
Usage
React Component:
import { useForm } from '@mohsensami/react-hook-form';
import {
requiredValidator,
minValidator,
maxValidator,
emailValidator,
} from '@mohsensami/react-hook-form/validators/rules';
import Input from '@mohsensami/react-hook-form/components/Input.js';
const [formState, onInputHandler] = useForm(
{
username: {
value: '',
isValid: false,
},
password: {
value: '',
isValid: false,
},
},
false
);
return (
<form action="#" className="login-form">
<div className="login-form__username">
<Input
className="login-form__username-input"
id="username"
type="text"
placeholder="Username"
element="input"
validations={[requiredValidator(), minValidator(8), maxValidator(20), emailValidator()]}
onInputHandler={onInputHandler}
/>
<i className="login-form__username-icon fa fa-user"></i>
</div>
<div className="login-form__password">
<Input
element="input"
id="password"
type="password"
className="login-form__password-input"
placeholder="Password"
validations={[requiredValidator(), minValidator(8), maxValidator(18)]}
onInputHandler={onInputHandler}
/>
<i className="login-form__password-icon fa fa-lock-open"></i>
</div>
<button
className={`login-form__btn ${formState.isFormValid ? 'login-form__btn-success' : 'login-form__btn-error'}`}
type="submit"
disabled={!formState.isFormValid}
>
<i className="login-form__btn-icon fas fa-sign-out-alt"></i>
<span className="login-form__btn-text">ورود</span>
</button>
</form>
);
Props
Authors
Contributing
If you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.