Fusion React App

Package for developing applications that uses the @equinor/fusion-framework.

API documentation

__Dependencies__

Configure

``tsx
// config.ts
import { AppConfigurator } from '@equinor/fusion-framework-react-app';
const configCallback: AppConfigurator = (configurator) => {
configurator.http.configureClient(
'bar', {
baseUri: 'https://somewhere-test.com',
defaultScopes: ['foo/.default']
}
);
};

// App.tsx
export const App = () => {
const client = useHttpClient('bar');
const [foo, setFoo] = useState('no value');
const onClick = useCallback(() => {
client.fetchAsync('api').then(x => x.json).then(setFoo);
}, [client]);
return {foo}
}

// index.ts
import { createApp } from '@equinor/fusion-framework-react-app';
export const render = createApp(App, configCallback);
export default render;
`

Hooks

$3


`tsx
import { useModule } from '@equinor/fusion-framework-react-app';
const ShowToken = () => {
const auth = useModule('auth');
const [token, setToken] = useState('');
useEffect(() => {
auth.acquireAccessToken().then(setToken);
}, [auth]);
return {token ?? 'fetching token'}
}
`

Http

$3

`tsx
import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
const App = () => {
const fooClient = useHttpClient('foo');

// using as stream
useEffect(() => {
const sub = client.fetch('api/all').subscribe((x) => {
setFoo(x.json());
});
return () => sub.unsubscribe();
},[fooClient]);

// using as promise
const barClient = useHttpClient('bar');
useCallback(async() => {
const res = await portalClient.fetchAsync('api/bar');
console.log(res.json());
},[barClient]);

}
`

Feature Flag

> [!IMPORTANT]
> @equinor/fusion-framework-module-feature-flag must be installed to make this module available

$3


`ts
import { enableFeatureFlag } from '@equinor/fusion-framework-react-app/feature-flag';
export const configure: ModuleInitiator = (appConfigurator, args) => {
/* provide a list of features that should be available in the application /
enableFeatureFlag(appConfigurator, [
{
key: MyFeatures.MyFlag,
title: 'this is a flag',
},
{
key: MyFeatures.MyUrlFlag,
title: 'this feature can be toggled by ?my-url-flag=true',
allowUrl: true,
}
]);
}
`

$3

`ts
export const configure: ModuleInitiator = (appConfigurator, args) => {
appConfigurator.useFeatureFlags(builder => /* see module for building custom config /);
}
``

see module for more technical information;