# zarm-form

> react mobile form component with validte effects

Latest version **4.0.0** (published 2022-04-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install zarm-form
pnpm add zarm-form
yarn add zarm-form
bun add zarm-form
```

## 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 | 4.0.0 |
| Published | 2022-04-02 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | yang103 |

## Links

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

## Dependencies (8)

- [zarm](https://npm.io/package/zarm.md) ^2.9.13
- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [lodash.omit](https://npm.io/package/lodash.omit.md) ^4.5.0
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^2.0.0
- [async-validator](https://npm.io/package/async-validator.md) ^3.2.4
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.0
- [@storybook/builder-webpack5](https://npm.io/package/@storybook/builder-webpack5.md) ^6.3.4

## Recent versions

- 4.0.0 (latest) — 2022-04-02
- 3.0.1 — 2021-06-24
- 3.0.0 — 2021-06-23
- 2.0.2 — 2021-03-26
- 2.0.1 — 2021-03-26
- 2.0.0 — 2020-04-18
- 1.2.4 — 2019-09-26
- 1.2.3 — 2019-09-04
- 1.2.2 — 2019-09-02
- 1.2.1 — 2019-08-29
- 1.1.3 — 2019-08-29
- 1.1.2 — 2019-08-29
- 1.1.1 — 2019-08-28
- 1.1.0 — 2019-08-26
- 1.0.5 — 2019-08-23
- … 5 more at https://npm.io/package/zarm-form/versions

## README

zarm-form is a react form component with validate effects, dependent on [zarm](https://github.com/ZhongAnTech/zarm) and [async-validator](https://github.com/yiminghe/async-validator) 

### Basic Usage
install 
```
  npm i zarm-form --save
```

### Example 
```
import React, {useRef} from 'react'
import ReactDOM from 'react-dom'
import {
  Input,
  Button
} from 'zarm'

import Form, { useForm } from 'zarm-form'


function Demo() {
  const fromRef = useRef();
  const { handleSubmit, errors, register } = useForm(fromRef);
  const submit = (values) => {
    console.log(values, 'ffff')
  }
  return <Form ref={fromRef} errors={errors}>
    <Form.Item
      label="name"
      name="name"
      className="customer-classname"
      showError={true}
      rules = {
        register([{
          required: true,
          message: 'Please input your name!',
          trigger: 'blur'
        }])
      }>
      <Input name="name" placeholder="please input name" />
    </Form.Item>
    <Form.Item
      label="age"
      name="age"
      className="customer-classname"
      rules = {
        register([{
          required: true,
          message: 'Please input your age!',
          trigger: 'blur'
        }])
      }>
      <Input name="age" placeholder="please input age" />
    </Form.Item>
    <Button onClick={handleSubmit(submit)} theme="primary" ghost>submit</Button>
  </Form>
}

ReactDOM.render(<Demo/> , document.getElementById('root'))
```

### [Demo on codesandbox](https://codesandbox.io/s/keen-oskar-ns95u?file=/src/App.js) 

## API

Form

| Properties | type | description |
| :--- | :--- | :--- |
| errors | object | validate result |

Form.Item

| Properties | type | description |
| :--- | :--- | :--- |
| label | string |  |
| name | string |  |
| hasArrow | boolean |  |
| error | string | validate result |
| showError | boolean | show error message |
| rules | array | register(rules) [async-validator](https://github.com/yiminghe/async-validator) |

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