0.1.6 • Published 4 years ago
react-web-form
Why?
Great performant optimization. it will only re-render that input element which needs to be updated.
Installation
npm i react-web-form
yarn add react-web-form
Usage
1. TextInput
import React, { memo } from 'react';
import {InputManager, FormManager} from 'react-web-form'
import './App.css';
function App() {
const onSubmit = (data,resetForm) => {
console.log({data});
resetForm();
}
const isInvalidName = (val) => val.trim().length < 3;
return (
<div className="App">
<div className="app-conatiner">
<FormManager onSubmit={onSubmit}>
<InputManager.Text
id="name"
required
className="input-text"
type="text"
label="Name"
invalidText="name is invalid"
emptyText="Name is required"
validate={isInvalidName}
/>
<button type="submit">SUbmit</button>
</FormManager>
</div>
</div>
);
}
export default App;
InputManager.Text ----- Props
Props | Description | required |
---|
id | same key will be used to identify the input field when the form will be submitted. | true |
required | if input filed is required deuring submit | false |
defaultValue | value which will be initially set | false |
errorClass | css style className which will be apllied to input element when the field is invalid | false |
label | to display a label on top of input | false |
invalidText | text to display when the field is invalid | false |
emptyText | text to display when the field is empty | false |
validate | function to validate if the field is invalid or not | false |
HeaderComponent | a react component to display on top of input element | false |
FooterComponent | a react component to display at bottom of input element and it will receive an error in props; | false |
onChange | function will be called on every change and it will receive an (id, value) as params | false |
all other input props | all the props which are passed to an input element | false |
2. SelectInput
import React, { memo } from 'react';
import {InputManager, FormManager} from 'react-web-form'
import './App.css';
function App() {
const onSubmit = (data,resetForm) => {
console.log({data});
resetForm();
}
const isInvalidAnimal = (val) => val.trim().length < 3;
return (
<div className="App">
<div className="app-conatiner">
<FormManager onSubmit={onSubmit}>
<InputManager.Select
id="animal"
required
className="input-text"
validate={isInvalidAnimal}
emptyText="Animal is required"
placeholder="Select Animal"
>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
</InputManager.Select>
<button type="submit">SUbmit</button>
</FormManager>
</div>
</div>
);
}
export default App;
InputManager.Select ----- Props
Props | Description | required |
---|
id | same key will be used to identify the input field when the form will be submitted. | true |
required | if input filed is required deuring submit | false |
defaultValue | value which will be initially selected | false |
errorClass | css style className which will be apllied to input element when the field is invalid | false |
label | to display a label on top of input | false |
invalidText | text to display when the field is invalid | false |
emptyText | text to display when the field is empty | false |
validate | function to validate if the field is invalid or not | false |
HeaderComponent | a react component to display on top of input element | false |
FooterComponent | a react component to display at bottom of input element and it will receive an error in props; | false |
onChange | function will be called on every change and it will receive an (id, value) as params | false |
all other select props | all the props which are passed to an select input element | false |
3. TextArea
import React, { memo } from 'react';
import {InputManager, FormManager} from 'react-web-form'
import './App.css';
function App() {
const onSubmit = (data,resetForm) => {
console.log({data});
resetForm();
}
const isInvalidName = (val) => val.trim().length < 3;
return (
<div className="App">
<div className="app-conatiner">
<FormManager onSubmit={onSubmit}>
<InputManager.TeaxtArea
id="name"
required
className="input-text"
type="text"
label="Name"
invalidText="name is invalid"
emptyText="Name is required"
validate={isInvalidName}
/>
<button type="submit">Submit</button>
</FormManager>
</div>
</div>
);
}
export default App;
InputManager.TextArea ----- Props
Props | Description | required |
---|
id | same key will be used to identify the input field when the form will be submitted. | true |
required | if input filed is required deuring submit | false |
defaultValue | value which will be initially set | false |
errorClass | css style className which will be apllied to input element when the field is invalid | false |
label | to display a label on top of input | false |
invalidText | text to display when the field is invalid | false |
emptyText | text to display when the field is empty | false |
validate | function to validate if the field is invalid or not | false |
HeaderComponent | a react component to display on top of input element | false |
FooterComponent | a react component to display at bottom of input element and it will receive an error in props; | false |
onChange | function will be called on every change and it will receive an (id, value) as params | false |
all other input props | all the props which are passed to an <textarea/> input element | false |
4. RadioInput
import React, { memo } from 'react';
import {InputManager, FormManager} from 'react-web-form'
import './App.css';
function App() {
const onSubmit = (data,resetForm) => {
console.log({data});
resetForm();
}
const isInvalidAnimal = (val) => val.trim().length < 3;
return (
<div className="App">
<div className="app-conatiner">
<FormManager onSubmit={onSubmit}>
<InputManager.Group
id="hobby"
required
label="Hobbies --------"
emptyText="hobby required"
>
<div>
<InputManager.Radio name="hobby" value="Marketing" />
<span>Marketing</span>
</div>
<div>
<InputManager.Radio name="hobby" value="Fishing" />
<span>Fishing</span>
</div>
<div>
<InputManager.Radio name="hobby" value="hawking" />
<span>hawking</span>
</div>
<div>
<InputManager.Radio name="hobby" value="bashing" />
<span>bashing</span>
</div>
</InputManager.Group>
<button type="submit">Submit</button>
</FormManager>
</div>
</div>
);
}
export default App;
InputManager.Group ----- Props
Props | Description | required |
---|
id | same key will be used to identify the input field when the form will be submitted. | true |
required | if input filed is required deuring submit | false |
defaultValue | value which will be initially selected in case of radio , and an array of values which will be selected in case of checkbox | false |
label | to display a label on top of input | false |
invalidText | text to display when the field is invalid | false |
emptyText | text to display when the field is empty | false |
validate | function to validate if the field is invalid or not | false |
HeaderComponent | a react component to display on top of input element | false |
FooterComponent | a react component to display at bottom of input element and it will receive an error in props; | false |
onChange | function will be called on every change and it will receive an (id, value) as params | false |
InputManager.Radio ----- Props
Props | Description | required |
---|
name | required to make the only a single radio input to be selected in a group | true |
value | value to be updtated when form is submitted | true |
radio input props | all other props available on a <input type="radio"/> element | false |
5. CheckBox
import React, { memo } from 'react';
import {InputManager, FormManager} from 'react-web-form'
import './App.css';
function App() {
const onSubmit = (data,resetForm) => {
console.log({data});
resetForm();
}
const isInvalidAnimal = (val) => val.trim().length < 3;
return (
<div className="App">
<div className="app-conatiner">
<FormManager onSubmit={onSubmit}>
<InputManager.Group
id="Hobbies"
label="Hobbies --------"
required
emptyText="hobby required"
>
<div>
<InputManager.CheckBox name="items" value="Marketing" />
<span>Marketing</span>
</div>
<div>
<InputManager.CheckBox name="items" value="Fishing" />
<span>Fishing</span>
</div>
<div>
<InputManager.CheckBox name="items" value="hawking" />
<span>hawking</span>
</div>
<div>
<InputManager.CheckBox name="items" value="bashing" />
<span>bashing</span>
</div>
</InputManager.Group>
<button type="submit">Submit</button>
</FormManager>
</div>
</div>
);
}
export default App;
InputManager.Group ----- Props
Props | Description | required |
---|
id | same key will be used to identify the input field when the form will be submitted. | true |
required | if input filed is required deuring submit | false |
defaultValue | value which will be initially selected in case of radio , and an array of values which will be selected in case of checkbox | false |
label | to display a label on top of input | false |
invalidText | text to display when the field is invalid | false |
emptyText | text to display when the field is empty | false |
validate | function to validate if the field is invalid or not | false |
HeaderComponent | a react component to display on top of input element | false |
FooterComponent | a react component to display at bottom of input element and it will receive an error in props; | false |
onChange | function will be called on every change and it will receive an (id, value) as params | false |
InputManager.CheckBox ----- Props
Props | Description | required |
---|
name | required to make a group of selected elements | true |
value | value to be updtated when form is submitted | true |
other input props | all other props available on a <input type="checkbox"/> element | false |
FormManager
---- props
Props | Description | required |
---|
onSubmit | function which will be called when the form is submitted and none of the field is invalid | true |
all other form props | all the other <form/> props can be passed | false |