JSPM

react-formio

2.1.0-beta.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3397
  • Score
    100M100P100Q113679F
  • License MIT

React renderer for form.io forms.

Package Exports

  • react-formio

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-formio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Formio

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

Install

npm

React Formio can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

npm install react-formio --save

Browser bundle

The browser bundle exposes a global Formio variable and expects to find a global React variable to work with.

You can find it in the /dist directory.

Form class

Give Form a src property and render:

** For es5 require() modules. **

var React = require('react');
var ReactDOM = require('react-dom');
var Form = require('react-formio').Form;

** For es6 import/export modules. **

import React from 'react';
import ReactDOM from 'react-dom';
import {Form} from 'react-formio';
ReactDOM.render(
  <Form src="https://example.form.io/example" />
  , document.getElementById('example')
);

See the src folder for all the available Props.

FormBuilder class

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.

** For es6 import/export modules. **

import React from 'react';
import ReactDOM from 'react-dom';
import {FormBuilder} from 'react-formio';
ReactDOM.render(
  <FormBuilder form={{display: 'form'}} onChange={(schema) => console.log(schema)} />
  , document.getElementById('builder')
);

See the src folder for all the available Props.

License

Released under the MIT License.