Home

Welcome to the react-formilicious wiki!

Installing

Alright then, let's get started right away with react-formilicious. The package is distributed in the npm registry, so feel free to use any npm compatible package manager to install it. We'll just go ahead and use npm:

$ npm install react-formilicious --save

A basic form

Let's go ahead and create a basic form:

import * as React from 'react';
import ReactDOM from 'react-dom';

import Form from 'react-formilicious';
import TextArea from 'react-formilicious/fields/TextArea';

class MyForm extends React.Component {
  constructor() {
    super();
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(data) {
    alert("The form was submitted!\n\n" + JSON.stringify(data, null, 2));
  }

  render() {
    return (<Form
      data={{
        feedback: "Just getting started with it, (hopefully!) excited to learn more."
      }}
      onSubmit={this.onSubmit}
      elements={[
        {
          type: TextArea,
          key: "feedback",
          name: "❓ Feedback",
          placeholder: "Please send us some feedback about react-formilicious!"
        }
      ]} />);
  }
}

ReactDOM.render(<div style={{ padding: 20 }}><MyForm /></div>, document.querySelector('#app'));

Okay, let's take this apart. We'll skip all the react stuff and get right to the part about Formilicious: <Form /> is the primary component of this library. It has the following props:

Name	Description	Type	Required
data	The initial data of your form. Should this change after the initial render of the form, only the values not yet edited by the user will be updated. MUST be an object. MAY NOT be undefined(Pass an empty object if no default data should be set)	any	✔️