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
;; { const onSubmit = { console; ; } const isInvalidName = vallength < 3; return <div className="App"> <div className="app-conatiner"> <FormManager onSubmit=onSubmit> <InputManagerText 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> ;} ;
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
;; { const onSubmit = { console; ; } const isInvalidAnimal = vallength < 3; return <div className="App"> <div className="app-conatiner"> <FormManager onSubmit=onSubmit> <InputManagerSelect 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> </InputManagerSelect> <button type="submit">SUbmit</button> </FormManager> </div> </div> ;} ;
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
;; { const onSubmit = { console; ; } const isInvalidName = vallength < 3; return <div className="App"> <div className="app-conatiner"> <FormManager onSubmit=onSubmit> <InputManagerTeaxtArea 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> ;} ;
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
;; { const onSubmit = { console; ; } const isInvalidAnimal = vallength < 3; return <div className="App"> <div className="app-conatiner"> <FormManager onSubmit=onSubmit> <InputManagerGroup id="hobby" required label="Hobbies --------" emptyText="hobby required" > <div> <InputManagerRadio name="hobby" value="Marketing" /> <span>Marketing</span> </div> <div> <InputManagerRadio name="hobby" value="Fishing" /> <span>Fishing</span> </div> <div> <InputManagerRadio name="hobby" value="hawking" /> <span>hawking</span> </div> <div> <InputManagerRadio name="hobby" value="bashing" /> <span>bashing</span> </div> </InputManagerGroup> <button type="submit">Submit</button> </FormManager> </div> </div> ;} ;
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
;; { const onSubmit = { console; ; } const isInvalidAnimal = vallength < 3; return <div className="App"> <div className="app-conatiner"> <FormManager onSubmit=onSubmit> <InputManagerGroup id="Hobbies" label="Hobbies --------" required emptyText="hobby required" > <div> <InputManagerCheckBox name="items" value="Marketing" /> <span>Marketing</span> </div> <div> <InputManagerCheckBox name="items" value="Fishing" /> <span>Fishing</span> </div> <div> <InputManagerCheckBox name="items" value="hawking" /> <span>hawking</span> </div> <div> <InputManagerCheckBox name="items" value="bashing" /> <span>bashing</span> </div> </InputManagerGroup> <button type="submit">Submit</button> </FormManager> </div> </div> ;} ;
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 |