React Form Simple Schema Component

This is a (currently draft) Form Builder and Validator package for React using formsy & formsy-react-components (bootstrap).

This should be a bridge for Meteor developers who use Simple Schema.

The package should optionally build a form optionally and validate a form similar to (a subset of) Autoform (built on top of Simple Schema)

Demo / Example

You can view the results thanks to React Storybook here:

https://github.com/zeroasterisk/react-form-simple-schema

Install

npm install --save react-form-simple-schema

Usage From Meteor v1.3+

See more in stories.

You must pass down the simple-schema schema object to the React Component in the container

import { Meteor } from 'meteor/meteor';
import { Lists } from '../../api/lists/lists.js';
import { createContainer } from 'meteor/react-meteor-data';
import ListPage from '../pages/ListPage.js';

export default createContainer(({ params }) => {
  const { id } = params;
  const todosHandle = Meteor.subscribe('todos.inList', id);
  const loading = !todosHandle.ready();
  const list = Lists.findOne(id);
  const listExists = !loading && !!list;
  const listSchema = Lists.schema();
  return {
    loading,
    list,
    listExists,
    todos: listExists ? list.todos().fetch() : [],
    listSchema
  };

Then you can use the schema object in your Component.

    <QuickForm
      schema={this.props.listSchema}
      onValidSubmit={action('onValidSubmit')}
      onValid={action('onValid')}
      onInvalid={action('onInvalid')}
      fields="name,email"
    />

NOTE: you can also pass in just a object which simulates the properties of a simple-schema schema, or the properties of formsy-react-components (which is what we translate simple schema into)

Contribute

PLEASE do contribute.

Send me pull requests with fixes, features, stories, etc.

You can also send issues, etc. (Ideally, communicate with a story in storybook and PR)

see CONTRIBUTING.md

TODO / Roadmap

• [x] setup package
• [x] proof of concept
• [x] build the basics of a form, with simple-schema
• [ ] validate the form
• [ ] build complex forms, nested Array
• [ ] build complex forms, nested Object
• [ ] support some of the common options for AutoForm
• [x] support omitFields && fields

Consider

• [ ] replicate/use alternate form components: unstyled, custom, material-ui, etc.

Thanks

Thanks to react-cdk for a great boilerplate for a React component.