react

@formio/react

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

Official Documentation

For the latest documentation, release information, and guides, always refer to the official Form.io Help Documentation available here:

https://help.form.io

Install

npm

npm install @formio/react --save
npm install @formio/js --save

yarn

yarn add @formio/react @formio/js

Usage with Vite (Note: When using frameworks like Next.js or Create React App, no extra Vite configuration is necessary)

When using @formio/react in a project built with Vite (especially for React 18 and 19), make sure you install the @vitejs/plugin-react package and configure it in your vite.config.js file.

Install Vite React Plugin

yarn add --dev @vitejs/plugin-react

In your vite.config.js, add the React plugin:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Hooks

useFormioContext

A hook to supply global Formio contextual values to your React components. Components that call useFormioContext must be children of a `` component.

Return Value

useFormioContext returns an object with the following parameters:

Examples

Use the authentication context provided by useFormioContext to evaluate the Form.io authentication of a user:

import { createRoot } from 'react-dom/client';
import { useFormioContext, FormGrid, FormioProvider } from '@formio/react';

const App = () => {
	const { isAuthenticated } = useFormioContext();

	return isAuthenticated ? (
		
			
				 setLocation(`/form/${id}`)}
				/>
			
			
				 setLocation(`/resource/${id}`)}
				/>
			
		
	) : (
		
	);
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
	
		
	,
);

Use the Form.io SDK to interact with a Form.io server:

…

Components

FormioProvider

A React context provider component that is required when using some hooks and components from this library.

Props

Examples

Render a simple form from your self hosted Form.io deployment:

import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
  
    
  
);

Extend the Formio object to use external modules:

import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';
import { Formio } from '@formio/js';
import premium from '@formio/premium';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

Formio.use(premium);
root.render(
  
    
  
);

Form

A React component wrapper around a Form.io form. Able to take a JSON form definition or a Form.io form URL and render the form in your React application.

Props