---
url: /guide/hooks.md
---
# 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:

```tsx
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:

```tsx
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>
  );
};
```