react-formio-engine

React functional components for form rendering and building, powered by formiojs. Drop-in replacement for @formio/react with no class components.

Install

npm install react-formio-engine

Quick Start

import { Form } from 'react-formio-engine';
import 'bootstrap/dist/css/bootstrap.css';
import 'formiojs/dist/formio.full.css';

const schema = {
  display: 'form',
  components: [
    { type: 'textfield', key: 'name', label: 'Name', validate: { required: true } },
    { type: 'email', key: 'email', label: 'Email' },
    { type: 'button', action: 'submit', label: 'Submit' },
  ],
};

function App() {
  return <Form src={schema} onSubmit={({ data }) => console.log(data)} />;
}

Exports

| Export | Description | |--------|-------------| | Form / FormRenderer | Renders a form from a JSON schema | | FormBuilder | Drag-and-drop form builder | | Formio | Formio singleton for advanced usage | | FormEngineProvider | Theme context provider | | ReactComponent | Base class for custom components (backward compat) | | baseEditForm | Base settings form for custom component editors | | createFormComponent | Factory for custom components (functional API) | | registerComponent | Register a custom component type | | removeSubmitFormio | Remove submit buttons from a form schema | | removeAutoFocusFormio | Remove autofocus from form components |

Form Renderer

import { Form } from 'react-formio-engine';

<Form
  src={formSchema}                    // Form JSON schema
  submission={{ data: { name: 'John' } }}  // Initial data
  options={{ noAlerts: true }}        // Formio options
  onSubmit={({ data }) => {}}        // Submit callback
  onChange={(submission) => {}}       // Change callback
  ref={formRef}                      // Access formRef.formio.submit()
/>

Form Builder

import { FormBuilder } from 'react-formio-engine';

<FormBuilder
  form={{ display: 'form', components: [] }}
  options={{
    builder: {
      basic: false,
      customBasic: {
        title: 'Fields',
        default: true,
        components: { textfield: true, email: true, textarea: true, button: true },
      },
    },
  }}
  onChange={(schema) => console.log(schema)}
/>

Custom Components

import { createFormComponent, Formio } from 'react-formio-engine';

const MyColorPicker = createFormComponent({
  type: 'colorpicker',
  label: 'Color Picker',
  icon: 'paint-brush',
  render: ({ value, onChange }) => (
    <input type="color" value={value || '#000'} onChange={(e) => onChange(e.target.value)} />
  ),
});

// Register for use in forms
Formio.registerComponent('colorpicker', MyColorPicker);

Theme Provider

import { FormEngineProvider, Form } from 'react-formio-engine';

<FormEngineProvider theme="antd">
  <Form src={schema} />
</FormEngineProvider>

Backward Compatibility

• Supports the same JSON schema format as formio.js v4
• ReactComponent and baseEditForm re-exported for existing custom components
• Drop-in API compatible with @formio/react

Keywords

react formio form-builder form-renderer json-schema-form drag-and-drop form-engine formiojs functional-components

License

MIT