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 |