npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mobx-react-form-raken

v0.0.0-development

Published

Automagically manage React forms state and automatic validation with MobX.

Downloads

2

Readme

MobX React Form

Automagically manage React forms state and automatic validation with MobX.

Travis Build Codecov Coverage npm node GitHub license Downloads Downloads Backers on Open Collective Sponsors on Open Collective

NPM


Features

  • Automatic Reactive Form State Management with MobX Magic.
  • Automatic Reactive Validation & Error Messages.
  • Validation Plugins & Multiple Validation Styles.
  • Nested Fields (w/ Serialization & Validation).
  • Nested Forms (w/ Nested Submission & Validation Hooks).
  • Dynamically Add/Del Nested Fields.
  • Support for Sync & Async Validation functions (w/ Promises).
  • Fields Props Bindings for custom Components.
  • Support for Material UI, React Widgets, React Select & more.
  • Dedicated DevTools Package.

Edit form-quickstart

Documentation

https://foxhound87.github.io/mobx-react-form

Live Demo

https://foxhound87.github.io/mobx-react-form/demo.html

Demo Code

https://github.com/foxhound87/mobx-react-form-demo

Tutorial

Automagically manage React forms state and automatic validation with MobX

Quick Start

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

See Validation Plugins & Modes and Supported Validation Packages for more info.

Below we are creating a plugins object using the validatorjs package to enable DVR functionalities (Declarative Validation Rules).

import validatorjs from 'validatorjs';

const plugins = { dvr: validatorjs };

Define the Form Fields

Define the fields as a collection with a rules property for the validation.

const fields = [{
  name: 'email',
  label: 'Email',
  placeholder: 'Insert Email',
  rules: 'required|email|string|between:5,25',
}, {
  name: 'password',
  label: 'Password',
  placeholder: 'Insert Password',
  rules: 'required|string|between:5,25',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  placeholder: 'Confirm Password',
  rules: 'required|string|same:password',
}];

You can also define fields as an object.

Define the Validation Hooks

const hooks = {
  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  },
  onError(form) {
    alert('Form has errors!');
    // get all form errors
    console.log('All form errors', form.errors());
  }
}

Initialize the Form

Simply pass the fields, plugins and hooks objects to the constructor

import MobxReactForm from 'mobx-react-form';

const form = new MobxReactForm({ fields }, { plugins, hooks });

Pass the form to a react component

The package provide some built-in and ready to use Event Handlers:

onSubmit(e), onClear(e), onReset(e) & more...

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

export default observer(({ form }) => (
  <form onSubmit={form.onSubmit}>
    <label htmlFor={form.$('email').id}>
      {form.$('email').label}
    </label>
    <input {...form.$('email').bind()} />
    <p>{form.$('email').error}</p>

    {/* ... other inputs ... */}

    <button type="submit" onClick={form.onSubmit}>Submit</button>
    <button type="button" onClick={form.onClear}>Clear</button>
    <button type="button" onClick={form.onReset}>Reset</button>

    <p>{form.error}</p>
  </form>
));

Other Field Props are available. See the docs for more details.

Extending the Form class

See how to implement the same configuration of this quickstart extending the Form class

Contributing

If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.

And don't forget to star the repo, I will ensure more frequent updates! Thanks!

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]