@equinor/fusion-framework-react-module
v3.1.1
Published
Utils for initializing and consuming fusion framework modules
Downloads
6,266
Readme
React Module
Concept
This module should provide React developers with utils for initializing and consume modules.
Usage
INTERNAL_MODULE
In general this package is implemented by framework/app scaffolding
- @equinor/fusion-framework-react-app
- @equinor/fusion-framework-react-framework
Requirements
- React >= 17
this module requires React 17 or higher since the creation, configuration and initializing of modules are async. The provider must be wrapped in an Suspense
components
Example
Create a provider component
import { Suspense } from 'react';
import http, { HttpModule } from '@equinor/fusion-framework-module-http';
import msal, { MsalModule } from '@equinor/fusion-framework-module-msal';
import { createModuleProvider } from '@equinor/fusion-framework-react-module';
export const ModuleProvider = createModuleProvider((config) => {
config.auth.configureDefault({
tenantId: 'MY_TENANT_ID',
clientId: 'MY_CLIENT_ID',
redirectUri: '/authentication/login-callback',
});
config.http.configureClient('foo', {
baseUri: 'https://foo.bar',
defaultScopes: ['FOO_CLIENT_ID/.default'],
});
},
[http, msal]
)
Create a app component (consumer)
import { useModule } from '@equinor/fusion-framework-react-module';
const AppComponent = () => {
const http = useModule('http');
const client = http.createClient('foo');
return (
<button onClick={client.fetchAsync('/api/todo')}>Fetch todo</button>
);
}
Render App
import ReactDOM from 'react-dom';
import { ModuleProvider } from './Provider';
import { AppComponent } from './AppComponent';
ReactDOM.render(
<Suspense fallback={<span>Loading framework</span>}>
<ModuleProvider>
<AppComponent />
</ModuleProvider>
</Suspense>,
document.getElementById('root')
);