I highly recommend you try out uniforms.
- Automatic forms generation
- Fields capable of rendering every schema
- Helper for creating custom fields with one line
- Inline and asynchronous form validation
- Integrations with various schemas:
- GraphQL
- SimpleSchema
- SimpleSchema@2
- And any other - only a small wrapper is needed!
- Wide range of themes:
- AntD theme
- Bootstrap3 theme
- Bootstrap4 theme
- Material UI theme
- Semantic UI theme
- plain HTML theme
This is a (DEPRECATED EXPERIMENT) 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)
You can view the results thanks to React Storybook here:
https://github.com/zeroasterisk/react-form-simple-schema
npm install --save react-form-simple-schema
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)
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
- setup package
- proof of concept
- 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
- support
omitFields
&&fields
- replicate/use alternate form components: unstyled, custom, material-ui, etc.
Thanks to react-cdk for a great boilerplate for a React component.