React-form-simple-schema NPM

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)