diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
new file mode 100644
index 00000000..1afa0d30
--- /dev/null
+++ b/client/components/useAsModal.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useModalBehavior } from '../utils/custom-hooks';
+
+export default (component) => {
+  const [visible, trigger, setRef] = useModalBehavior();
+
+  const wrapper = () => <div ref={setRef}> {visible && component} </div>; // eslint-disable-line
+
+  return [trigger, wrapper];
+};
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 9f5cd8f1..d7f7da77 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -31,7 +31,7 @@ import Console from '../components/Console';
 import { remSize } from '../../../theme';
 // import OverlayManager from '../../../components/OverlayManager';
 import ActionStrip from '../../../components/mobile/ActionStrip';
-import { useAsModal } from '../../../utils/custom-hooks';
+import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';
 
diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js
index 2776b5bf..1a0978d1 100644
--- a/client/utils/custom-hooks.js
+++ b/client/utils/custom-hooks.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 export const noop = () => {};
 
@@ -40,12 +40,3 @@ export const useModalBehavior = (hideOverlay) => {
 
   return [visible, trigger, setRef];
 };
-
-// TODO: This is HOC, not a hook. Where do we put it?
-export const useAsModal = (component) => {
-  const [visible, trigger, setRef] = useModalBehavior();
-
-  const wrapper = () => (<div ref={setRef}> {visible && component} </div>); // eslint-disable-line
-
-  return [trigger, wrapper];
-};