@equinor/fusion-framework-react

React bindings for bootstrapping and consuming a Fusion Framework instance inside a React application tree.

Features

• Framework provider — initialise and distribute the framework via React context with a single component or factory function.
• useFramework hook — access the active Fusion instance from any descendant component.
• Module hooks — retrieve individual framework modules (useFrameworkModule) without manual wiring.
• App hooks — observe the currently active application, query app manifests, and access app-level modules.
• Context hook — read the currently selected Fusion context.
• Feature-flag hooks — read, toggle, and observe feature flags at the framework or application level.
• HTTP hook — obtain pre-configured HTTP clients (portal, people) from the framework.
• Auth hook — retrieve the currently authenticated user.
• SignalR hook — subscribe to real-time SignalR hub topics.

Installation

pnpm add @equinor/fusion-framework-react

Usage

Bootstrap the framework (declarative)

import { Framework } from '@equinor/fusion-framework-react';

const App = () => (
  <Framework
    configure={(configurator) => {
      configurator.http.configureClient('my-api', {
        baseUri: 'https://api.example.com',
      });
    }}
    fallback={<span>Loading…</span>}
  >
    <MyApp />
  </Framework>
);

Bootstrap the framework (factory)

import { createFrameworkProvider } from '@equinor/fusion-framework-react';
import { Suspense, useMemo } from 'react';

const Portal = () => {
  const Provider = useMemo(
    () =>
      createFrameworkProvider((config) => {
        config.http.configureClient('my-api', {
          baseUri: 'https://api.example.com',
        });
      }),
    [],
  );

  return (
    <Suspense fallback={<span>Loading…</span>}>
      <Provider>
        <App />
      </Provider>
    </Suspense>
  );
};

Consume the framework

import { useFramework } from '@equinor/fusion-framework-react';

const useMyService = () => {
  const fusion = useFramework();
  return fusion.modules.http.createClient('my-api');
};

Get a specific module

import { useFrameworkModule } from '@equinor/fusion-framework-react';
import type { HttpModule } from '@equinor/fusion-framework-module-http';

const http = useFrameworkModule<HttpModule>('http');

API Reference

Components

Factory

Core hooks

App hooks (/app)

Context hook (/context)

Feature-flag hooks (/feature-flag)

HTTP hook (/http)

Convenience hooks (/hooks)

SignalR hook (/signalr)

Re-exported types

Sub-entry-points

The package exposes several sub-entry-points for tree-shakeable imports:

• @equinor/fusion-framework-react — core providers and hooks
• @equinor/fusion-framework-react/app — application hooks
• @equinor/fusion-framework-react/context — context hooks
• @equinor/fusion-framework-react/feature-flag — feature-flag hooks
• @equinor/fusion-framework-react/hooks — convenience hooks
• @equinor/fusion-framework-react/http — HTTP hooks
• @equinor/fusion-framework-react/signalr — SignalR hooks