@equinor/fusion-framework-react-app v5.2.10
Fusion React App
Package for developing applications that uses the @equinor/fusion-framework
.
Dependencies
Configure
// 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 <Button onClick={onClick}>{foo}</Button>
}
// index.ts
import { createApp } from '@equinor/fusion-framework-react-app';
export const render = createApp(App, configCallback);
export default render;
Hooks
useModule
import { useModule } from '@equinor/fusion-framework-react-app';
const ShowToken = () => {
const auth = useModule('auth');
const [token, setToken] = useState<string>('');
useEffect(() => {
auth.acquireAccessToken().then(setToken);
}, [auth]);
return <span>{token ?? 'fetching token'}</span>
}
Http
useHttpClient
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
Simple
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,
}
]);
}
Custom
export const configure: ModuleInitiator = (appConfigurator, args) => {
appConfigurator.useFeatureFlags(builder => /** see module for building custom config */);
}
see module for more technical information;
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago