Add hook for getting app context in functional components

1 files changed, 15 insertions, 4 deletions

diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
index 4a905be6b1..113a29fe71 100644
--- a/gui/src/renderer/context.tsx
+++ b/gui/src/renderer/context.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useContext } from 'react';
 import App from './app';
 
 export interface IAppContext {
@@ -10,6 +10,10 @@ if (process.env.NODE_ENV === 'development') {
   AppContext.displayName = 'AppContext';
 }
 
+const missingContextError = new Error(
+  'The context value is empty. Make sure to wrap the component in AppContext.Provider.',
+);
+
 export default function withAppContext<Props>(BaseComponent: React.ComponentType<Props>) {
   // Exclude the IAppContext from props since those are injected props
   const wrappedComponent = (props: Omit<Props, keyof IAppContext>) => {
@@ -23,9 +27,7 @@ export default function withAppContext<Props>(BaseComponent: React.ComponentType
 
             return <BaseComponent {...mergedProps} />;
           } else {
-            throw new Error(
-              'The context value is empty. Make sure to wrap the component in AppContext.Provider.',
-            );
+            throw missingContextError;
           }
         }}
       </AppContext.Consumer>
@@ -39,3 +41,12 @@ export default function withAppContext<Props>(BaseComponent: React.ComponentType
 
   return wrappedComponent;
 }
+
+export function useAppContext(): App {
+  const appContext = useContext(AppContext);
+  if (appContext) {
+    return appContext.app;
+  } else {
+    throw missingContextError;
+  }
+}