# react-form-latest

> Form libary which supports custom inputs and highly customizable

Latest version **0.1.11** (published 2022-07-03) · 0 weekly downloads

## Install

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

## 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.11 |
| Published | 2022-07-03 |
| First published | 2022-06-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 76.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Navjot Sharma |
| Maintainers | navsharmaji |
| Keywords | react, form, advanced, latest |

## Links

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

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^18.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [node-sass](https://npm.io/package/node-sass.md) ^7.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.4.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [react-form-latest](https://npm.io/package/react-form-latest.md) ^0.1.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.11 (latest) — 2022-07-03
- 0.1.10 — 2022-07-03
- 0.1.9 — 2022-07-03
- 0.1.8 — 2022-06-26
- 0.1.7 — 2022-06-24
- 0.1.6 — 2022-06-24
- 0.1.5 — 2022-06-24
- 0.1.4 — 2022-06-24
- 0.1.3 — 2022-06-24
- 0.1.2 — 2022-06-24
- 0.1.1 — 2022-06-24
- 0.1.0 — 2022-06-23

## README

# React Form Latest

Form libary which supports custom inputs and highly customizable.

Even if input fields are in child components top level Form will still include them.

### OUTPUT

```javascript
npm i react-form-latest
```

### Usage

```javascript
import './App.scss';
import {
  Form, 
  TextInput, 
  Dropdown, 
  Toggle, 
  Radio, 
  StarsInput,
  Chips,
  Tags,
  SubmitButton 
} from 'react-form-latest';

function App(props) {
  return (
    <>
    <Form
      className='p-20'
      onValue={value => console.log(value)}
    >

     <TextInput 
        field='name'
        label='Name'
        minLength={3}
        maxLength={50}
        required
      />
      <TextInput 
        field='age'
        label='Age'
        type='integer'
        min={0}
        max={150}
      />

      <Dropdown
       options={[
        {id: 'female', value: 'Female'},
        {id: 'male', value: 'Male'},
        {id: 'transgender', value: 'Transgender'},
        {id: 'secret', value: "Don't wish to disclose"},
       ]}
       field='gender'
       label='Gender'
       required
      />

      <TextInput 
        field='password'
        label='Password'
        type='password'
        required
      />

      <div className='d-flex aic'>
        <p>Marital Status: </p>
        <div className='d-flex aic'>
          <Radio
            field='maritalStatus'
            name='MaritalStatus'
            buttons={[
              {label: 'Married', id: 'married'},
              {label: 'Unmarried', id: 'unmarried'},
              {label: 'Other', id: 'other'},
            ]}
            className='mx-10'
            required
          />
        </div>
      </div>

      <Toggle
        field='status'
        label='Enable'
      />
      <Toggle
        field='agree'
        label='Yes, I agree to privacy policy and terms of conditions.'
        type='check'
        required
      />

      <StarsInput
        field='stars'
        required 
      />

      <Chips
        field='category'
        chips={[
          {label: 'Category1', value: 'category1'},
          {label: 'Category2', value: 'category2'},
          {label: 'Category3', value: 'category3'},
          {label: 'Category4', value: 'category4'},
        ]}
        value='category2'
        required
      />
      
      <Chips
        field='categories'
        multi
        chips={[
          {label: 'Category1', value: 'category1'},
          {label: 'Category2', value: 'category2'},
          {label: 'Category3', value: 'category3'},
          {label: 'Category4', value: 'category4'},
        ]}
        value={['category2', 'category3']}
        required
      />

      <Tags
        field='tags'
        chips={[
          {label: 'Category1', value: 'category1'},
          {label: 'Category2', value: 'category2'},
          {label: 'Category3', value: 'category3'},
          {label: 'Category4', value: 'category4'},
        ]}
      />

      <SubmitButton>Submit</SubmitButton>
    </Form>
   </>
  );
}

export default App;
```

### OUTPUT

```javascript
{
  age: "25"
  agree: true
  category: 'category2',
  categories: ['category2', 'category3']
  gender: "male"
  maritalStatus: "unmarried"
  name: "Navjot Sharma"
  password: "abcdefgh",
  status: false,
  stars: 4,
  tags: ['category1', 'category2', 'category3', 'category4']
}
```
### Inputs Supported

Inputs:
  ✔ TextInput
  ✔ Dropdown
  ✔ Radio
  ✔ Toggle
  ✔ Stars
  ✔ Chips
  ✔ Tags
  ☐ File
  ☐ TextEditor
  ☐ Datepicker

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