# mobx-valite-form-store

> A MobX form store using `valite` as validator.

Latest version **0.1.3** (published 2018-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install mobx-valite-form-store
pnpm add mobx-valite-form-store
yarn add mobx-valite-form-store
bun add mobx-valite-form-store
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-08-01 |
| First published | 2018-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 30.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vitor Luiz Cavalcanti |
| Maintainers | vitorluizc |
| Keywords | mobx, form, validator, store |

## Links

- npm: https://www.npmjs.com/package/mobx-valite-form-store
- Repository: https://github.com/VitorLuizC/mobx-valite-form-store
- Homepage: https://github.com/VitorLuizC/mobx-valite-form-store#readme
- Issues: https://github.com/VitorLuizC/mobx-valite-form-store/issues
- npm.io page: https://npm.io/package/mobx-valite-form-store

## Dependencies (1)

- [valite](https://npm.io/package/valite.md) ^0.4.0

## 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.3 (latest) — 2018-08-01
- 0.1.2 — 2018-06-18
- 0.1.1 — 2018-06-18
- 0.1.0 — 2018-06-18

## README

# MobX `valite` form Store

[![Build Status][2]][1]

A MobX form store using [valite][0] as validator.

## Installation

This module is published under NPM Registry, so you can install using NPM, Yarn and other package managers.

```sh
npm install --save mobx-valite-form-store

# Use the command below if you're using Yarn.
yarn add mobx-valite-form-store
```

## Usage

This module provides a store class to handle form states, validators & their error states.

```js
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import FormStore from 'mobx-valite-form';

// An validator schema for entries object.
const validators = {
  name: [
    (name) => (typeof name === 'string' && !!name.trim()) || 'Name is a required entry.',
    (name) => (name.length > 2 && name.length < 30) || 'Name should have between 2 and 30 chars.'
  ]
};

@observer
export default class Form extends Component {
  @observable store = new FormStore({ name: '' }, validators);

  onSubmit = async () => {
    await this.store.validateEntries();

    if (!this.store.isValid)
      return;
    this.props.onSave(this.store.entries);
  };

  render () {
    return (
      <form>
        <input
          value={ this.store.entries.name }
          onChange={ (e) => this.store.setEntry('name', e.target.value) }
        />

        { this.store.errors.name && <span>{ this.store.errors.name }</span> }
      </form>
    );
  }
}
```

## License

Released under MIT license.

[0]: https://github.com/VitorLuizC/valite
[1]: https://travis-ci.org/VitorLuizC/mobx-valite-form-store
[2]: https://travis-ci.org/VitorLuizC/mobx-valite-form-store.svg?branch=master

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