Hooks

useFormioContext

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

Return Value

useFormioContext returns an object with the following parameters:

Name	Type	Description
Formio	typeof Formio	The global Formio object. Useful for various static methods as well as SDK functions that are exposed when the new operator is used.
baseUrl	string	The base url for a Form.io server.
projectUrl	string	The base url for a Form.io enterprise project.
logout	() => void	A convenience method to logout of a Form.io session by invalidating the token and removing it from local storage.
token	string	The Form.io JWT-token (if the user is authenticated).
isAuthenticated	boolean	A convenience value that is toggled when logging in or out of a Form.io session.

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} from '@tsed/react-formio/hooks/useFormioContext';
import {FormioProvider} from '@tsed/react-formio/contexts/FormioProvider';
import {FormListView} from './forms/FormListView';
import {ResourceListView} from './ressources/FormListView';

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

  return isAuthenticated ? (
  	<Router>
  	  <Route path="/form">
        <FormListView />
  	  </Route>
  	  <Route path="/resource">
        <ResourceListView />
  	  </Route>
  	</Router>
  ) : (
  	<Redirect to="/login" />
  );
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
  <FormioProvider projectUrl="https://examples.form.io">
    <App />
  </FormioProvider>,
);

Example of FormListView implementation:

import React, {useEffect, useState} from 'react';
import {Formio} from '@formio/js';
import type {FormType, Operation} from "@tsed/react-formio";
import {useFormioContext} from '@tsed/react-formio/hooks/useFormioContext';
import {FormsTable} from "@tsed/react-formio/organisms/table/forms/FormsTable";

export const FormListView = () => {
  const {projectUrl, token, Formio} = useFormioContext();
  const [forms, setForms] = useState<any[]>([]);
  const operations = [
    {
      title: 'Edit',
      action: 'edit',
      alias: 'row',
      icon: 'edit',
      // permissionsResolver: () => {},
    },
    {
      action: 'delete',
      buttonType: 'danger',
      icon: 'trash',
      // permissionsResolver: () => {}
    }
  ];

  const onClick = (form: FormType, operation: Operation) => {
    // Handle click event
    console.log(`Operation: ${operation.action} on form: ${form.title}`);
    switch (operation.action) {
      case 'row': // when clicking on the row
      case 'edit':
        // Navigate to edit page
        setLocation("/forms/" + form._id);
      break;
      case 'delete':
        // Handle delete action
    }
  };

  useEffect(() => {
    const formio = new Formio(projectUrl, { token });
    formio.loadForms({ params: { type: 'form' } }).then(setForms);
  }, [projectUrl, token, Formio]);

  return (
    <div>
      <FormsTable data={forms} operations={operations} onClick={onClick} />
    </div>
  );
};