@etelstamour/tea v0.3.0

React Formio

A React library for rendering out forms based on the Form.io platform.

Example Application

To see an example application of how to implement all the components and modules in this library, see https://github.com/formio/react-app-starterkit

Install

npm

@formio/react can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

npm install @formio/react --save
npm install @formio/js --save // Install @formio/js since it is a peerDependency

Components

Form

The form component is the primary component of the system. It is what takes the form definition (json) and renders the form into html. There are multiple ways to send the form definition to the Form component. The two main ways are to either pass the src prop which will make a request for the form definition or to pass a pre-loaded form prop with the form definition you specify and an optional url prop.

The src prop is a url to the form definition, usually a form.io server. When using the src prop the form will automatically submit the data to this url as well.

The form prop accepts a pre-loaded json form definition. Pair this optionally with a url prop to the location of the form. This is used for file upload, oauth and other components or actions that need to know where the server is.

Props

Event Props

You can respond to various events in the form. Simply pass in a prop with a function for one of these events.

Example

Give Form a src property and render:

import React from 'react';
import ReactDOM from 'react-dom';
import { Form } from '@formio/react';

ReactDOM.render(
	<Form src="https://example.form.io/example" onSubmit={console.log} />,
	document.getElementById('example'),
);

FormBuilder

The FormBuilder class can be used to embed a form builder directly in your react application. Please note that you'll need to include the CSS for the form builder from formio.js as well.

import { FormBuilder } from '@formio/react';

Without Components:

<FormBuilder form={[]} />

With Components:

<FormBuilder
	form={{
		display: 'form',
		components: [
			{
				label: 'Email',
				tableView: true,
				key: 'email',
				type: 'email',
				input: true,
			},
			{
				label: 'Password',
				tableView: false,
				key: 'password',
				type: 'password',
				input: true,
				protected: true,
			},
		],
	}}
/>

Please note that the FormBuilder component does not load and save from/to a url. You must handle the form definition loading and saving yourself or use the FormEdit component.

Props

Event Props

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { FormBuilder } from '@formio/react';

ReactDOM.render(
	<FormBuilder
		form={{ display: 'form' }}
		onChange={(schema) => console.log(schema)}
	/>,
	document.getElementById('builder'),
);

Errors

The Errors component can be used to print out errors that can be generated within an application. It can handle many types of errors that are generated by the form.io actions.

Props

Event Props

None

FormEdit

The FormEdit component wraps the FormBuilder component and adds the title, display, name and path fields at the top along with a save button.

Props

Event Props

FormGrid

The FormGrid component can be used to render a list of forms with buttons to edit, view, delete, etc on each row.

Props

Event Props

SubmissionGrid

The submisison grid will render a list of submissions and allow clicking on one row to select it.

Props

Event Props

Modules

Modules contain Redux actions, reducers, constants and selectors to simplify the API requests made for form.io forms. Reducers, actions and selectors all have names. This provides namespaces so the same actions and reducers can be re-used within the same redux state.

root

The root module is the container for things shared by other modules such as the selectRoot selector.

Selectors

auth

The auth module is designed to make it easier to login, register and authenticate users within react using the form.io login system.

Reducers

Actions

form

The form module is for interacting with a single form.

Reducers

Actions

Selectors

forms

The forms module handles multiple forms like a list of forms.

Reducers

Actions

Selectors

submission

The submission module is for interacting with a single submission.

Reducers

Actions

Selectors

submissions

The submissions module handles multiple submissions within a form, like for a list of submissions.

Reducers

Actions

Selectors

License

Released under the MIT License.