@equinor/fusion-framework-react 0.0.0-context-error-20240131144633

package/dist/types/app/useCurrentAppModule.d.ts

@@ -0,0 +1,8 @@
+import { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import { ModuleKey, type AnyModule, ModuleTypes, ModuleType } from '@equinor/fusion-framework-module';
+export declare const useCurrentAppModule: <TType extends unknown = unknown, TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>>(moduleKey: TKey) => {
+    module?: (TType extends AnyModule ? ModuleType<TType> : AppModulesInstance[Extract<"event", TKey> | Extract<"http", TKey> | Extract<"auth", TKey> | Extract<"dispose", TKey>]) | null | undefined;
+    error?: unknown;
+    complete: boolean;
+};
+export default useCurrentAppModule;

package/dist/types/app/useCurrentAppModules.d.ts

@@ -0,0 +1,8 @@
+import { AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import { type AnyModule } from '@equinor/fusion-framework-module';
+export declare const useCurrentAppModules: <TModules extends AnyModule[] = []>() => {
+    modules: AppModulesInstance<TModules> | null;
+    error?: unknown;
+    complete: boolean;
+};
+export default useCurrentAppModules;

package/dist/types/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@equinor/fusion-framework-react-module-context';
+export { useCurrentContext } from './useCurrentContext';

package/dist/types/context/useCurrentContext.d.ts

@@ -0,0 +1,5 @@
+export declare const useCurrentContext: () => {
+    currentContext: import("@equinor/fusion-framework-react-module-context").ContextItem | null | undefined;
+    setCurrentContext: (entry?: string | import("@equinor/fusion-framework-react-module-context").ContextItem | null | undefined) => void | Promise<import("@equinor/fusion-framework-react-module-context").ContextItem<Record<string, unknown>> | null>;
+};
+export default useCurrentContext;

package/dist/types/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { Fusion } from '@equinor/fusion-framework';
+export declare const context: import("react").Context<Fusion<any> | null>;
+export declare const FrameworkProvider: import("react").Provider<Fusion<any> | null>;

package/dist/types/create-framework-provider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FusionConfigurator } from '@equinor/fusion-framework';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+export declare const createFrameworkProvider: <TModules extends AnyModule[] = []>(cb: (configurator: FusionConfigurator<TModules, any>) => void | Promise<void>) => React.LazyExoticComponent<React.FunctionComponent<React.PropsWithChildren<unknown>>>;

package/dist/types/feature-flag/index.d.ts

@@ -0,0 +1,6 @@
+export { useFeature } from './useFeature';
+export { useFeatures } from './useFeatures';
+export { useCurrentAppFeatures } from './useCurrentAppFeatures';
+export { useFrameworkFeature } from './useFrameworkFeature';
+export { useFrameworkFeatures } from './useFrameworkFeatures';
+export { IFeatureFlag, IFeatureFlagProvider } from '@equinor/fusion-framework-module-feature-flag';

package/dist/types/feature-flag/useCurrentAppFeatures.d.ts

@@ -0,0 +1,2 @@
+import { type UseFeaturesResult } from './useFeatures';
+export declare const useCurrentAppFeatures: () => UseFeaturesResult;

package/dist/types/feature-flag/useFeature.d.ts

@@ -0,0 +1,8 @@
+import { type IFeatureFlag, type IFeatureFlagProvider } from '@equinor/fusion-framework-module-feature-flag';
+export interface UseFeatureResult<T> {
+    feature?: IFeatureFlag<T>;
+    error?: unknown;
+    toggleFeature: (enable?: boolean) => void;
+}
+export declare const useFeature: <T = unknown>(provider: IFeatureFlagProvider, key: string) => UseFeatureResult<T>;
+export default useFeature;

package/dist/types/feature-flag/useFeatures.d.ts

@@ -0,0 +1,9 @@
+import { type IFeatureFlagProvider, type IFeatureFlag } from '@equinor/fusion-framework-module-feature-flag';
+import { type FeatureSelectorFn } from '@equinor/fusion-framework-module-feature-flag/selectors';
+export interface UseFeaturesResult {
+    features: IFeatureFlag[];
+    error: unknown;
+    toggleFeature: (key: string, enable?: boolean) => void;
+}
+export declare const useFeatures: (provider?: IFeatureFlagProvider | null, selector?: FeatureSelectorFn) => UseFeaturesResult;
+export default useFeatures;

package/dist/types/feature-flag/useFrameworkFeature.d.ts

@@ -0,0 +1,3 @@
+import { useFeature } from './useFeature';
+export declare const useFrameworkFeature: <T>(key: string) => import("./useFeature").UseFeatureResult<T>;
+export default useFrameworkFeature;

package/dist/types/feature-flag/useFrameworkFeatures.d.ts

@@ -0,0 +1,3 @@
+import { useFeatures } from './useFeatures';
+export declare const useFrameworkFeatures: () => ReturnType<typeof useFeatures>;
+export default useFrameworkFeatures;

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useCurrentUser } from './use-current-user';
+export { useHttpClient } from './use-http-client';

package/dist/types/hooks/use-current-user.d.ts

@@ -0,0 +1,8 @@
+export type AccountInfo = {
+    environment: string;
+    tenantId: string;
+    username: string;
+    localAccountId: string;
+    name?: string;
+};
+export declare const useCurrentUser: () => AccountInfo | undefined;

package/dist/types/hooks/use-http-client.d.ts

@@ -0,0 +1,5 @@
+import { Fusion } from '@equinor/fusion-framework';
+type HttpClient = ReturnType<Fusion['modules']['http']['createClient']>;
+type FrameworkHttpClient = 'portal' | 'people';
+export declare const useHttpClient: (name: FrameworkHttpClient) => HttpClient;
+export {};

package/dist/types/http/index.d.ts

@@ -0,0 +1,2 @@
+export { useHttpClient as useFrameworkHttpClient } from '../hooks/use-http-client';
+export * from '@equinor/fusion-framework-react-module-http';

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export type { Fusion } from '@equinor/fusion-framework';
+export { FusionConfigurator } from '@equinor/fusion-framework';
+export { createFrameworkProvider } from './create-framework-provider';
+export { FrameworkProvider } from './context';
+export { useFramework } from './useFramework';
+export { useFrameworkModule } from './useFrameworkModule';
+export { default, Framework } from './Framework';

package/dist/types/signalr/index.d.ts

@@ -0,0 +1,2 @@
+import { useProviderTopic } from '@equinor/fusion-framework-react-module-signalr';
+export declare const useSignalR: <T>(hubId: string, topicId: string) => import("@equinor/fusion-framework-react-module-signalr").Topic<T>;

package/dist/types/useFramework.d.ts

@@ -0,0 +1,4 @@
+import type { Fusion } from '@equinor/fusion-framework';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+export declare const useFramework: <TModules extends AnyModule[] = []>() => Fusion<TModules>;
+export default useFramework;

package/dist/types/useFrameworkModule.d.ts

@@ -0,0 +1,3 @@
+import type { FusionModules, FusionModulesInstance } from '@equinor/fusion-framework';
+import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+export declare const useFrameworkModule: <TType extends unknown = unknown, TKey extends string = ModuleKey<ModuleTypes<FusionModules<[TType]>>>>(name: TKey) => TType extends AnyModule ? ModuleType<TType> | undefined : FusionModulesInstance[Extract<"context", TKey> | Extract<"event", TKey> | Extract<"http", TKey> | Extract<"auth", TKey> | Extract<"services", TKey> | Extract<"serviceDiscovery", TKey> | Extract<"dispose", TKey>] | undefined;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "6.0.0";

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@equinor/fusion-framework-react",
+  "version": "0.0.0-context-error-20240131144633",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./app": "./dist/esm/app/index.js",
+    "./feature-flag": "./dist/esm/feature-flag/index.js",
+    "./context": "./dist/esm/context/index.js",
+    "./hooks": "./dist/esm/hooks/index.js",
+    "./http": "./dist/esm/http/index.js",
+    "./signalr": "./dist/esm/signalr/index.js"
+  },
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "app": [
+        "dist/types/app/index.d.ts"
+      ],
+      "feature-flag": [
+        "dist/types/feature-flag/index.d.ts"
+      ],
+      "context": [
+        "dist/types/context/index.d.ts"
+      ],
+      "hooks": [
+        "dist/types/hooks/index.d.ts"
+      ],
+      "http": [
+        "dist/types/http/index.d.ts"
+      ],
+      "signalr": [
+        "dist/types/signalr/index.d.ts"
+      ]
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/equinor/fusion-framework.git",
+    "directory": "packages/react/framework"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1",
+    "@equinor/fusion-framework": "^0.0.0-context-error-20240131144633",
+    "@equinor/fusion-framework-module": "^4.2.6",
+    "@equinor/fusion-framework-react-module": "^3.0.7",
+    "@equinor/fusion-framework-react-module-http": "^4.0.5",
+    "@equinor/fusion-observable": "^8.1.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.3",
+    "@equinor/fusion-framework-module-app": "^5.2.12",
+    "@equinor/fusion-framework-module-feature-flag": "^1.0.0",
+    "@equinor/fusion-framework-react-module-context": "^0.0.0-context-error-20240131144633"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "@equinor/fusion-framework-module-feature-flag": "^1.0.0",
+    "@equinor/fusion-framework-react-module-signalr": "^2.0.16"
+  },
+  "peerDependenciesMeta": {
+    "@equinor/fusion-framework-react-module-context": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-react-module-signalr": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-module-feature-flag": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/Framework.tsx

@@ -0,0 +1,22 @@
+import { FusionConfigurator } from '@equinor/fusion-framework';
+import { createFrameworkProvider } from './create-framework-provider';
+import { PropsWithChildren, ReactNode, Suspense, useMemo } from 'react';
+
+type ConfigureCallback = (configurator: FusionConfigurator) => void;
+
+export const Framework = (
+    props: PropsWithChildren<{
+        readonly configure: ConfigureCallback;
+        readonly fallback: NonNullable<ReactNode> | null;
+    }>,
+) => {
+    const { configure, fallback, children } = props;
+    const Component = useMemo(() => createFrameworkProvider(configure), [configure]);
+    return (
+        <Suspense fallback={fallback}>
+            <Component>{children}</Component>
+        </Suspense>
+    );
+};
+
+export default Framework;

package/src/app/index.ts

@@ -0,0 +1,7 @@
+export type { AppConfig, AppManifest, AppType, IApp } from '@equinor/fusion-framework-module-app';
+
+export { useCurrentApp } from './useCurrentApp';
+export { useCurrentAppModule } from './useCurrentAppModule';
+export { useCurrentAppModules } from './useCurrentAppModules';
+export { useApps } from './useApps';
+export { useAppProvider } from './useAppProvider';

package/src/app/useAppProvider.ts

@@ -0,0 +1,19 @@
+import { FusionModulesInstance } from '@equinor/fusion-framework';
+import { AppModule } from '@equinor/fusion-framework-module-app';
+
+import { useFramework } from '../useFramework';
+
+/**
+ * React Hook - get appProvider interface
+ * @returns framework AppModule
+ */
+export const useAppProvider = (): FusionModulesInstance<[AppModule]>['app'] => {
+    const provider = useFramework<[AppModule]>().modules.app;
+    if (!provider) {
+        throw Error('Current framework does not have AppModule configured');
+    }
+
+    return provider;
+};
+
+export default useAppProvider;

package/src/app/useApps.ts

@@ -0,0 +1,30 @@
+import { AppManifest } from '@equinor/fusion-framework-module-app';
+import { useObservableState } from '@equinor/fusion-observable/react';
+import { useMemo } from 'react';
+
+import { useAppProvider } from './useAppProvider';
+
+/**
+ * React Hook - Get apps from framework
+ * @param args Object with boolean  member includeHidden
+ * @returns Object {apps, isLoading} where apps is Array of AppManifest, isLoading is a boolean on observable complete
+ */
+export const useApps = (args?: {
+    includeHidden: boolean;
+}): { apps: AppManifest[] | undefined; isLoading: boolean } => {
+    const provider = useAppProvider();
+    const { value: manifests, complete } = useObservableState(
+        useMemo(() => provider.getAllAppManifests(), [provider]),
+    );
+
+    const apps = useMemo(() => {
+        if (manifests && !args?.includeHidden) {
+            return manifests.filter((app) => !app.hide);
+        }
+        return manifests;
+    }, [args, manifests]);
+
+    return { apps, isLoading: !complete };
+};
+
+export default useApps;

package/src/app/useCurrentApp.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+import { type AnyModule } from '@equinor/fusion-framework-module';
+import { type AppModule, type CurrentApp } from '@equinor/fusion-framework-module-app';
+
+import { useFramework } from '../useFramework';
+
+/**
+ * Observers the stream of current app and return the latest application
+ *
+ * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ *
+ * @template TModule type hint modules which the application has configured
+ * @template TEnv type hint what kind of environment config the application has
+ */
+export const useCurrentApp = <TModules extends Array<AnyModule> = [], TEnv = unknown>(): {
+    currentApp: CurrentApp<TModules, TEnv>;
+    setCurrentApp: (appKey: string) => void;
+    clearCurrentApp: () => void;
+    error?: unknown;
+} => {
+    const provider = useFramework<[AppModule]>().modules.app;
+    if (!provider) {
+        throw Error('Current framework does not have AppModule configured');
+    }
+    const currentApp$ = useMemo(() => provider.current$, [provider]);
+    const { value, error } = useObservableState(currentApp$);
+    return {
+        currentApp: value as CurrentApp<TModules, TEnv>,
+        setCurrentApp: useMemo(() => provider.setCurrentApp.bind(provider), [provider]),
+        clearCurrentApp: useMemo(() => provider.clearCurrentApp.bind(provider), [provider]),
+        error,
+    };
+};
+
+export default useCurrentApp;

package/src/app/useCurrentAppModule.ts

@@ -0,0 +1,43 @@
+import { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import {
+    ModuleKey,
+    type AnyModule,
+    ModuleTypes,
+    ModuleType,
+} from '@equinor/fusion-framework-module';
+import useCurrentAppModules from './useCurrentAppModules';
+
+/**
+ * Retrieves the current app module based on the provided module key.
+ * @template TType - The type of the module.
+ * @template TKey - The type of the module key.
+ * @param {TKey} moduleKey - The key of the module to retrieve.
+ * @returns {AnyModule | null | undefined} - The current app module or null if not found.
+ * @remarks
+ *  - when module is null, there are no current selected application
+ *  - when undefined is, the application has not enabled the requested module
+ */
+export const useCurrentAppModule = <
+    TType extends AnyModule | unknown = unknown,
+    TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>,
+>(
+    moduleKey: TKey,
+): {
+    module?:
+        | (TType extends AnyModule
+              ? ModuleType<TType>
+              : AppModulesInstance[Extract<keyof AppModulesInstance, TKey>])
+        | null;
+    error?: unknown;
+    complete: boolean;
+} => {
+    const { modules, error, complete } = useCurrentAppModules();
+    const module =
+        modules === null
+            ? null
+            : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (modules[moduleKey as keyof typeof modules] as any);
+    return { module, error, complete };
+};
+
+export default useCurrentAppModule;

package/src/app/useCurrentAppModules.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import useCurrentApp from './useCurrentApp';
+
+import { AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import { Observable, of } from 'rxjs';
+import { type AnyModule } from '@equinor/fusion-framework-module';
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+/**
+ * Observers the stream of current app initialized modules
+ *
+ * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ *
+ * @template TModule type hint modules which the application has configured
+ * @returns the observable instance of initialized modules of the application
+ */
+export const useCurrentAppModules = <TModules extends Array<AnyModule> = []>(): {
+    modules: AppModulesInstance<TModules> | null;
+    error?: unknown;
+    complete: boolean;
+} => {
+    const { currentApp, error: appError } = useCurrentApp<TModules>();
+    const modules$ = useMemo(
+        () =>
+            currentApp
+                ? (currentApp.instance$ as Observable<AppModulesInstance<TModules>>)
+                : of(null),
+        [currentApp],
+    );
+    const {
+        value: modules,
+        error,
+        complete,
+    } = useObservableState(modules$, {
+        initial: (currentApp?.state.modules as unknown as AppModulesInstance<TModules>) ?? null,
+    });
+    return {
+        modules,
+        error: error ?? appError,
+        complete,
+    };
+};
+
+export default useCurrentAppModules;

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from '@equinor/fusion-framework-react-module-context';
+
+export { useCurrentContext } from './useCurrentContext';

package/src/context/useCurrentContext.ts

@@ -0,0 +1,6 @@
+import { useCurrentContext as _useCurrentContext } from '@equinor/fusion-framework-react-module-context';
+import { useFramework } from '../useFramework';
+
+export const useCurrentContext = () => _useCurrentContext(useFramework().modules.context);
+
+export default useCurrentContext;

package/src/context.ts

@@ -0,0 +1,25 @@
+import { createContext } from 'react';
+import type { Fusion } from '@equinor/fusion-framework';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const context = createContext<Fusion<any> | null>(null);
+
+/**
+ * Component for providing framework.
+ *
+ * @remarks
+ * Should be created by {@link createFrameworkProvider}
+ *
+ * @example
+ * ```tsx
+ * import {FrameworkProvider} from '@equinor/fusion-framework-react';
+ * export const Component = (args: React.PropsWithChildren<{framework: Fusion}>) => {
+ *   return (
+ *      <FrameworkProvider value={args.framework}>
+ *        {args.children}
+ *      </FrameworkProvider>
+ *   );
+ * }
+ * ```
+ */
+export const FrameworkProvider = context.Provider;

package/src/create-framework-provider.tsx

@@ -0,0 +1,42 @@
+import React, { lazy } from 'react';
+import initFusion from '@equinor/fusion-framework';
+import { FusionConfigurator } from '@equinor/fusion-framework';
+
+import { FrameworkProvider } from './context';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import { ModuleProvider } from '@equinor/fusion-framework-react-module';
+
+/**
+ * Create a framework provider for react.
+ *
+ * This function is for providers of framework, like a portal.
+ *
+ * @param configurator - callback for configuring modules
+ * @example
+ * ```tsx
+ * const config: FusionConfigurator = (config) => {}
+ * const Portal = () => {
+ *   const Framework = createFrameworkProvider(config);
+ *   return (
+ *      <Suspense fallback={<span>loading...</span>}>
+ *          <Framework>{children}</Framework>
+ *      </Suspense>
+ *   );
+ * };
+ * ```
+ */
+export const createFrameworkProvider = <TModules extends Array<AnyModule> = []>(
+    cb: (configurator: FusionConfigurator<TModules>) => void | Promise<void>,
+): React.LazyExoticComponent<React.FunctionComponent<React.PropsWithChildren<unknown>>> =>
+    lazy(async () => {
+        const configurator = new FusionConfigurator<TModules>();
+        await cb(configurator);
+        const framework = await initFusion(configurator);
+        return {
+            default: ({ children }: { children?: React.ReactNode }) => (
+                <FrameworkProvider value={framework}>
+                    <ModuleProvider value={framework.modules}>{children}</ModuleProvider>
+                </FrameworkProvider>
+            ),
+        };
+    });

package/src/feature-flag/README.md

@@ -0,0 +1,44 @@
+__useCurrentAppFeatures__
+
+Custom hook for accessing all feature flags for an application
+
+```tsx
+const Component =  () => {
+  const appFeatures = useCurrentAppFeatures();
+  if( appFeatures.features === undefined ){
+      return <p>The current app does not have features enabled</p>
+  }
+  return (
+    <>
+      { 
+        appFeatures.features.map(feature => (
+          <button
+            key={feature.key}
+            disabled={ appFeatures.readOnly }
+            onClick={ () => appFeatures.toggleFeature( feature.key ) }
+          >
+            { feature.enabled ? 'disable' : 'enable' } feature { feature.title }
+          </button>
+        )) 
+      
+      }
+    </>
+  )
+}
+```
+
+__useFrameworkFeature__
+
+Custom hook for using a framework feature
+
+__useFrameworkFeatures__
+
+Custom hook for using all framework features
+
+__useFeature__
+
+> internal hook for getting a feature from a feature flag module
+
+__useFeatures__
+
+> internal hook for getting features of a feature flag module

package/src/feature-flag/index.ts

@@ -0,0 +1,7 @@
+export { useFeature } from './useFeature';
+export { useFeatures } from './useFeatures';
+export { useCurrentAppFeatures } from './useCurrentAppFeatures';
+export { useFrameworkFeature } from './useFrameworkFeature';
+export { useFrameworkFeatures } from './useFrameworkFeatures';
+
+export { IFeatureFlag, IFeatureFlagProvider } from '@equinor/fusion-framework-module-feature-flag';

package/src/feature-flag/useCurrentAppFeatures.ts

@@ -0,0 +1,19 @@
+import { type FeatureFlagModule } from '@equinor/fusion-framework-module-feature-flag';
+import { useCurrentAppModule } from '../app';
+import { useFeatures, type UseFeaturesResult } from './useFeatures';
+
+/**
+ * Custom hook that returns the current app features and provides a function to toggle a feature.
+ * @returns An object containing the current app features, a function to toggle a feature, and any error that occurred.
+ */
+export const useCurrentAppFeatures = (): UseFeaturesResult => {
+    const { module, error: moduleError } = useCurrentAppModule<FeatureFlagModule>('featureFlag');
+
+    const { features, toggleFeature, error } = useFeatures(module);
+
+    return {
+        features,
+        toggleFeature,
+        error: error ?? moduleError,
+    };
+};

package/src/feature-flag/useFeature.ts

@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+
+import { EMPTY } from 'rxjs';
+
+import {
+    type IFeatureFlag,
+    type IFeatureFlagProvider,
+} from '@equinor/fusion-framework-module-feature-flag';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
+
+export interface UseFeatureResult<T> {
+    feature?: IFeatureFlag<T>;
+    error?: unknown;
+    /**
+     * @param enable - Optional provide new enabled state of the feature flag. _Defaults to inversion of current feature flag state_
+     */
+    toggleFeature: (enable?: boolean) => void;
+}
+
+/**
+ * Custom hook that retrieves a feature flag from a feature flag provider.
+ *
+ * @template T - The type of the feature flag value.
+ * @param {IFeatureFlagProvider} provider - The feature flag provider.
+ * @param {string} key - The key of the feature flag.
+ * @returns {UseFeatureResult<T>} - An object containing the feature flag value, a function to toggle the feature flag, and any error that occurred.
+ */
+export const useFeature = <T = unknown>(
+    provider: IFeatureFlagProvider,
+    key: string,
+): UseFeatureResult<T> => {
+    const feature$ = useMemo(() => provider.features$.pipe(findFeature<T>(key)), [provider, key]);
+    const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
+    const toggleFeature = useCallback(
+        (enable?: boolean) => {
+            const enabled = enable === undefined ? !provider.getFeature(key)?.enabled : enable;
+            provider.toggleFeature({ key, enabled });
+        },
+        [provider, key],
+    );
+    return { feature, toggleFeature, error };
+};
+
+export default useFeature;