mobx-forms
A simple form management for Mobx & React.
Last updated 4 years ago by oreqizer .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install mobx-forms 
SYNC missed versions from official npm registry.

mobx-forms

A simple form manager for React and Mobx.

Heavily inspired by and based on Redux Form! Be sure to check it out if you're a Redux fan.

TODO

  • [ ] namespace types
  • [ ] add docs

ROADMAP

  1. finish the api (mainly submitting/async validation)
  2. better README :blush:

Installation

npm i --save mobx-forms

Usage

Use Provider from mobx-react and supply the form store to it as mobxForms.

import { FormsStore } from 'mobx-forms';
import { Provider } from 'mobx-react';

import YourApp from './YourApp';

const Root = () =>
  <Provider mobxForms={new FormsStore()}>
    <YourApp>
  </Provider>;

export default Root;

Initializing a form:

import React from 'react';
import { observer } from 'mobx-react';

import { mobxForm, Field, FieldArray } from 'mobx-forms';

const Form = props => (
  <div>
    My field:
    <Field
      name="myField"
      component={Input}
    />
    My flat array:
    <FieldArray
      name="flatarray"
      component={FlatArray}
      flat
    />
    My multi-field array:
    <FieldArray
      name="deeparray"
      component={DeepArray}
    />
  </div>
);

export default mobxForm({
  form: 'myForm',
})(Form);

Example of a FlatArray and DeepArray:

const FlatArray = observer(props =>
  <div>
    {props.fields.map((index) =>
      <Field
        name="flatfield"
        key={index}
        index={index}
        component="input"
      />
    )}
    <button onClick={props.fields.push}>
      Add field
    </button>
    <button onClick={props.fields.pop}>
      Remove field
    </button>
  </div>
);

const DeepArray = observer(props =>
  <div>
    {props.fields.map(index =>
      <div key={index}>
        name:
        <Field
          name="name"
          index={index}
          component={Input}
        />
        surname:
        <Field
          name="surname"
          index={index}
          component="input"
        />
      </div>
    )}
    <button onClick={props.fields.push}>
      Add fields
    </button>
    <button onClick={props.fields.pop}>
      Remove fields
    </button>
  </div>
);

That's it! You will get the form's instance as a prop named form.

Field accepts either a string or a component. It will receive the necessary properties. More detailed docs incoming.

Current Tags

  • 0.2.1                                ...           latest (4 years ago)

11 Versions

  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (27)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |