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:

Since the core library does not include any fields(as their semantics differ from framework to framework) we will also install fields for the Bulma CSS framework. As of now only Bulma is supported, but work is being done on adding support for more and more frameworks. If you use a different framework the way to components look and behave may differ.

$ npm install @react-formilicious/core --save
$ npm install @react-formilicious/bulma --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/bulma';
import TextArea from '@react-formilicious/bulma/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)	{}	✔️
onSubmit	This function is called with the data of the form once the "Submit" button is clicked(and all form values are valid).	(data : {}) => void	✔️
elements	The heart of the form. Elements define the fields of your form. The type definition on the right contains the properties that are used for/by every element, but most element types have quite a few properties on their own.	{ type: FormField, key: string, name: React.ReactNode?, ignoreData: boolean?, validator: FieldValidator? }[]	✔️
onChange	This function is called whenever the data of the form changes. Also called if the form values are invalid.	(data : {}) => void	❌
validateBeforeSubmit	If this is enabled(it is by default) the entire form will be revalidated before the "Submit" button is clicked. This ensures that no invalid values are passed to onSubmit. This is useful since validators do not run against the initial data - If the initial data always contains valid values you can safely disable this.	boolean	❌
fieldTimeout	react-formilicious supports async field change handlers & validators. To ensure that the form stays responsive each field only has a certain time to run before it is considered as failed. The default value for this is 3000ms. You can set this to a negative value to disable the time limit.	number	❌
buttons	If different buttons that the default buttons are desired you can pass them here. Read More ...	{ key: string, name: React.ReactNode, action: "submit" | "reset" | (data: {}) => void, type: string? }[]	❌