# react-web-form

> ## Why? ##### Great performant optimization. it will only re-render that input element which needs to be updated.

Latest version **0.1.6** (published 2020-05-05) · 0 weekly downloads

## Install

```sh
npm install react-web-form
pnpm add react-web-form
yarn add react-web-form
bun add react-web-form
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-05-05 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 84.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | warish56 |

## Links

- npm: https://www.npmjs.com/package/react-web-form
- Repository: https://github.com/warish56/react-web-form
- Homepage: https://github.com/warish56/react-web-form#readme
- Issues: https://github.com/warish56/react-web-form/issues
- npm.io page: https://npm.io/package/react-web-form

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2

## Recent versions

- 0.1.6 (latest) — 2020-05-05
- 0.1.5 — 2020-05-01
- 0.1.4 — 2020-05-01
- 0.1.3 — 2020-05-01
- 0.1.2 — 2020-05-01
- 0.1.1 — 2020-05-01
- 0.1.0 — 2020-05-01

## README

# 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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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 |

---
_Source: https://npm.io/package/react-web-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._