React form is a initiative to provide a better form validation and implimentation experience to React developers. See Example
-
Automatic validation,
-
Custom Input, Select, Checkbox, Radio inputs
-
Easy to Implement
-
Almost like HTML Forms and Inputs (No need to learn much of the APIs).
-
Animated Label Inputs.
Step 1. Clone or download the code base.
git clone https://github.com/sharma-dev/react-form.git or
wget https://github.com/sharma-dev/react-form/archive/master.zip Step 2. Extract the code Step 3. Put the code in your codebase and use import
import { Form, Input } from "./react-form/src; Step 4. Setup CSS. Either you can directly import CSS file to your code if you are using modern React and babel tools. (If you create your project via react-create-app you can use direct import) or you can merge the CSS with your default style sheet.
Direct import
import style from './react-form/style.css'; Note: Styles are also provided at the end of this document.
import React, { Component } from "react"; import { Form, Input } from './react-form/src'; import style from "./react-form/style.css"; class RegisterForm extends Component{ render(){ return ( <Form id="my-form" action="some-page.asp" method="post" defaultPrevented={true}> <Input name="name" placeholder="Name" validateOnBlur={true} validation="required"/> <Input type="password" name="password" /> <button> Submit </button> </From> ) } } 1. id (type: string): Form id (Same as html form),
2. className (type: string): Form className (Same as html form),
3. method (type string): Form method (Same as html form),
4. action (type: string): Form action (Same as html form),
5. onSubmit (type: function): onSubmit function to be executed when the form is submited.
6. defaultPrevented (type: bool): If true form submit will be defult prevented (default value false).
7. shouldValidate: If false validation of inputs on submit will not work (default value is true).
8. children (type: React Child Node): React Node Elements for the form can be and JSX and Input Elements supported by default.
1. containerClassName (type string): ClassName of outer container,
2. type (type string): type of input (same as default HTML input)
3. placeholder (type placeholder): Placeholder/(Floating label) for the input,
4. className (type string): input className,
5. name (type string): input name,
6. defaultValue (type string): input deafult value,
7. value (type string): input value,
8. onChange (type function): onChange Event,
9. onBlur (type function): onBlur Event,
10. onFocus (type function): onFocus Event,
11. validation (type string/array): Validation for input. For more details see validation details
Currently, react-form supports only the following validations
required: a required field cannot be empty.
email : validation for email input.
number : validation for numeric value.
min_val : validation to check for minimum value for the input syntax min_val:length
max_val : validation to check for maximum value for the input syntax max_val:length
regex : react-form also accepts custom regex validation to validated custom regex value syntax regex:regex_expression
To use multiple validations on the single input you can use an array of validations.
<Input type="text" placeholder="Validation Example" validation={['required', 'phone', 'min_val:10', "max_val:10"]}> .rc-input{ position: relative; } .rc-input label { position: relative; text-align: left; margin: 0; margin-top: 10px; height: auto; font-size: 18px; } .rc-input label span { font-size: 1em; font-weight: normal; color: #444; padding: 0; } .rc-input label.input-label-animate span { position: absolute; bottom: -5px; left: 15px; transition: all 0.3s ease-out; } .rc-input label.input-label-animate .label-seprate { bottom: 1.9em; left: 0; font-size: 0.8em; } .rc-input label input:not([type='radio']):not([type='checkbox']) { height: 1.1em; font-size: inherit; border: 0; box-shadow: none; outline: 0; border-bottom: 1px solid; border-radius: 0; font-weight: normal; margin-top: 1.5em; padding: 6px 15px; } .rc-input label input:not([type='radio']):not([type='checkbox']).error_input { border: solid 1.5px #ff5252; border-radius: 5px; } .rc-input label input[type='radio'], .rc-input label input[type='checkbox'] { float: left; margin-right: 5px; margin-top: 1.5px; zoom: 1.3; } .rc-input label i { position: absolute; right: 0px; top: 50%; transform: translateX(-50%); cursor: pointer; } .rc-input input[type=button], .rc-input input[type=reset], .rc-input input[type=submit], .rc-input button.submit { display: inherit; margin: 16px auto 0; display: inherit; border-radius: 0; box-shadow: none; background: #067b98; border: #067b98; outline: #067b98; color: #fff; padding: 12px 15%; } .error-cross-icn span{ position: absolute; background: #fff; z-index: 99; width: 200px; height: auto; display: none; padding: 10px; box-shadow: 0px 0px 6px 1px #bdbdbd; border: solid 1px #bdbdbd; border-radius: 5px; bottom: calc(100% + 10px); } .error-cross-icn span:before{ z-index: 10; border-top-color:#bdbdbd; } .error-cross-icn span:after{ z-index: 11; border-top-color:#fff; } .error-cross-icn:hover > span{ display: flex; justify-content: center; align-items: center; } .error-cross-icn { position: absolute; right: 12px; bottom: 7px; width: 22px; height: 22px; background: #ff5252; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .error-cross-icn:before, .error-cross-icn:after { position: absolute; content: ' '; height: 50%; width: 3px; background-color: #fff; } .error-cross-icn:before { transform: rotate(45deg); } .error-cross-icn:after { transform: rotate(-45deg); } This is an initial project and has many vulnerabilities. I like to get support and contribution from other developers in making this library a success whereas I'll be giving a good amount of time to the library as well. To contribute simply
Post an Issue
or
Simply fork the project
Make changes
Give me a pull request