# react-form-beta

> React form

Latest version **1.0.5** (published 2018-08-24) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-08-24 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 6.9.1 |
| Dependencies | 15 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Author | showsun |
| Maintainers | showsunli |
| Keywords | form, react, react form |

## Links

- npm: https://www.npmjs.com/package/react-form-beta
- npm.io page: https://npm.io/package/react-form-beta

## Dependencies (15)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [react](https://npm.io/package/react.md) ^16.4.2
- [update](https://npm.io/package/update.md) ^0.7.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.2
- [url-loader](https://npm.io/package/url-loader.md) ^1.0.1
- [react-icons](https://npm.io/package/react-icons.md) ^3.0.5
- [react-slick](https://npm.io/package/react-slick.md) ^0.16.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.1.6
- [react-json-view](https://npm.io/package/react-json-view.md) ^1.19.1
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^3.0.0-beta.6
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.24.1
- [react-html-attributes](https://npm.io/package/react-html-attributes.md) ^1.4.3
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) ^2.0.3
- [@opuscapita/react-perfect-scrollbar](https://npm.io/package/@opuscapita/react-perfect-scrollbar.md) ^3.0.3
- [babel-plugin-transform-remove-console](https://npm.io/package/babel-plugin-transform-remove-console.md) ^6.9.4

## 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

- 1.0.5 (latest) — 2018-08-24
- 1.0.4 — 2018-08-24
- 1.0.3 — 2018-08-20
- 1.0.2 — 2018-08-19
- 1.0.1 — 2018-08-17
- 1.0.0 — 2018-08-16

## README

# React Form Component

## npm
```sh
  npm i react-form-beta
```

## Links
<a href="https://github.com/1987showsun/form-component-by-React-dev">GitHub</a>
<a href="https://www.npmjs.com/package/react-form-beta">NPM</a>

## Demo
<a href="https://1987showsun.github.io/form-component-by-React-dev/">Demo</a>

## Use direction Object

```js
  [
    {
      "type"        : "text",                   // html input type  ex: text / password / number / mail / radio / textarea / select / date / multiple / file
      "name"        : "username",               // html input name , only name
      "value"       : "sun",                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false",
      "showTime"    : false,                    // for type date , time show / hide
      "children"    : []                        // only type select 
    },
    { ... },
    {
      "type"        : "select",                 // html input type  ex: text / password / number / mail / radio / textarea / select / date / multiple / file
      "name"        : "like",                   // html input name , only name
      "value"       : [
        {
          "value"     : "1",
          "name"      : "selected name"
        },
        {...},
        {
          "value"     : "n",
          "name"      : "selected name"
        }
      ],                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [
        {
          "value"     : "1",
          "name"      : "option name"
        },
        {...},
        {
          "value"     : "n",
          "name"      : "option name"
        }
      ],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false",
      "showTime"    : false,                    // for type date , time show / hide
      "children"    : []                        // only type select 
    }
  ]
```

### Api key children
```js
  children : [
    {
      "key"         : "",                       // correspond type:select selected value 
      "type"        : "text",                   // html input type Ex: text / password / number / mail / radio / textarea / select / date / multiple
      "name"        : "username",               // html input name , only name
      "value"       : "sun",                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false"
      "showTime"    : false                     // for type date , time show / hide
    }
  ]
```

## Use direction component
```js 
  import Form from react-form-beta;

  testMultipleSearch( string ){
    console.log( string );
  }

  testResult( object ){
    console.log( object );
  }

  testCancel(){
    //cancel function action
  }

  <Form
    data             = { this.state.form }                     // form object setup data
    multipleSearch   = { this.testMultipleSearch.bind(this) }  // multiple return search value call ajax
    result           = { this.testResult.bind(this) }          // form result
    cancel           = { this.testCancel.bind(this) }          // from cancel 
  />
```


## Use direction Object Api
| Api                     | type                       | method                                                                                              |
|-------------------------|----------------------------|-----------------------------------------------------------------------------------------------------|
| type                    | string                     | type       : "text / password / number / mail / radio / textarea / select / date / multiple / file" |
| name                    | string                     | name       : "input name (only))"                                                                   |
| value                   | string / Object            | value      : "test value" / [{ "value":"", "name":"" }]                                             |
| data                    | Object                     | data       : [{ "value":"", "name":"" }]                                                            |
| label                   | string                     | label      : "input label"                                                                          |
| placeholder             | string                     | placeholder: "input placeholder"                                                                    |
| required                | Object                     | required   : { "switch": false, "msg": "" } / { "switch": true, "msg": "" }                         |
| showTime                | boolean                    | showTime   : true / false                                                                           |
| children                | Object                     | children   : [{<br/> "key": "",<br/> "type":"",<br/> "name":"",<br/> "value":[{}]/"",<br/> "data":[{}],<br/> "label":"",<br/> "placeholder":"",<br/> "required": true/false,<br/> "showTime":true/false<br/> }]|

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