Form handling when using React

react
1

I’ve started using React in a new project of mine. I’m used to using autoform for generating and handling forms. However, since now I’ve replaced blaze with React, it seems like I can no longer use autoform.

I’m fine writing out the forms manually (I never used autoform’s quickform anyway). My main concern is handling validation and form submission. In the few examples of Meteor + React that I’ve found, it was always done manually.

Is there any existing package or pattern for efficiently handling forms with React, or can I somehow still use autoform with React?

1 Like
2

Here’s a few React form libraries. I haven’t used any of these as my recent project required me to build a custom form set. I ended up building my own component set.

You can install these using the React Meteor guide and Browserify section:

http://gcanti.github.io/tcomb-form
http://prometheusresearch.github.io/react-forms

1 Like
3

Thanks for the links! I’m new to React so I wasn’t aware of those.

The problem is, I have schemas defined for all of my collections. Those libraries have their own way of defining schemas which aren’t the same syntax, so I can’t re-use the Simple Schema objects.

I don’t want to re-write the schemas because they are used server side as they are now. So I guess I’ll need to make my own implementation that works with Simple Schema.

Unless there is a way to use blaze templates inside or React components? In that case I could still use Autoform, even though it’s kinda hacky.

4

A combo of React Parts and searching on Github ranked by stars is usually my goto. However even then it’s hard to get some of the gems :smile:


[quote="coniel, post:3, topic:7048"] The problem is, I have schemas defined for all of my collections. Those libraries have their own way of defining schemas which aren't the same syntax, so I can't re-use the Simple Schema objects. [/quote]

I’m not familiar with the syntax they want but is it possible to run it through a function to convert the names/types to a shape that the component expects? (basically taking the old object and constructing a new one with the old data).


[quote="coniel, post:3, topic:7048"] Unless there is a way to use blaze templates inside or React components? In that case I could still use Autoform, even though it's kinda hacky. [/quote]

Yep that’s always an option. Some things I can’t live without, like tabular tables. Here’s an example of the login buttons (i’m sure there might be a React component for this out there already but this is what I have in my prod apps):


```

var LoginButtons = React.createClass({
componentDidMount() {
var div = document.getElementById(‘login-container’);
Blaze.renderWithData(Template.loginButtons, {}, div);
},

// don’t allow this part of the dom update or React may complain
shouldComponentUpdate() {
return false;
},

render() {
return

;
}
});

// somewhere else

2 Likes
5

update: got this working (not tested though). it goes something like this:

EditProfile = React.createClass({
  componentDidMount() {
    this.view = Blaze.renderWithData(Template.quickForm, {collection: "Test", id: "InsertTestForm", type: "insert"}, React.findDOMNode(this.refs.container));
  },

  componentWillUnmount() {
    Blaze.remove(this.view);
  },

  render() {
    return (
      <span ref="container" />
    )
  }
});
1 Like
6

Your way work with blaze component no contains children.

{{#autoForm ...}}
{{> afFieldInput ... }}
{{/autoForm

We can reuse autoform package in react if we can solve problem with this template

7

Has anyone tried to get autoform working with https://atmospherejs.com/thereactivestack/blazetoreact? Looks like a potential solid solution here.

8

no, this package doesn’t help with {{#autoForm}} problem

9

I just want to call out that we here at MDG are aware of this issue and it’s one of the main things we need to address in the plan for moving to React. We’ll probably need to talk with @aldeed and see how we can refactor some of his work, since right now SimpleSchema is definitely the way to go.

6 Likes
10

This was posted recently:

It’s a React compatible Autoform alternative supporting SimpleSchema, with Material-UI and Sematic UI components.

6 Likes
11

Just wondering where is this at?

1 Like
12

https://github.com/vazco/uniforms/ is an excelent library for form-handling in react with support for simple-schema and graphql-schemas, with default-uis for bootstrap3, 4, semantic ui, antd and material.

it works as easy and magic as the blaze autoform.

SimpleSchema is also available on npm now: https://github.com/aldeed/node-simple-schema

1 Like