PoC: Rough example of adopting createContext

src/components/hotkeys/HotkeyContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+// Default to null - should be overridden by a provider (HotkeyLayer)
+const HotkeyContext = createContext({ hotkeyLayer: null});
+
+export default HotkeyContext;

src/components/hotkeys/HotkeyHelpModal.js

@@ -13,6 +13,7 @@ import HotkeyFriendlyModal from './HotkeyFriendlyModal'; // eslint-disable-line
 import messages from './messages';
 
 import './HotkeyHelpModal.scss';
+import HotkeyContext from './HotKeyContext';
 
 const specialCharacters = {
     backspace: '\u232b',
@@ -35,9 +36,7 @@ class HotkeyHelpModal extends Component {
         onRequestClose: PropTypes.func.isRequired,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
+    static contextType = HotkeyContext;
 
     constructor(props, context) {
         super(props);

src/components/hotkeys/HotkeyLayer.js

@@ -6,6 +6,7 @@ import HotkeyService from './HotkeyService';
 
 import Hotkeys from './Hotkeys';
 import HotkeyHelpModal from './HotkeyHelpModal'; // eslint-disable-line import/no-cycle
+import HotkeyContext from './HotKeyContext';
 
 import './HotkeyLayer.scss';
 
@@ -25,28 +26,17 @@ class HotkeyLayer extends Component {
         enableHelpModal: false,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
-    static childContextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
     constructor(props) {
         super(props);
 
         this.hotkeyService = new HotkeyService();
-    }
 
-    state = {
-        isHelpModalOpen: false,
-    };
 
-    getChildContext() {
-        return {
+        // need to move this inside constructor so that we can access this.hotkeyService after it's initialized
+        this.state = {
+            isHelpModalOpen: false,
             hotkeyLayer: this.hotkeyService,
-        };
+        }
     }
 
     componentWillUnmount() {
@@ -85,16 +75,18 @@ class HotkeyLayer extends Component {
         const { children, className = '', enableHelpModal } = this.props;
 
         return (
-            <Hotkeys configs={this.getHotkeyConfigs()}>
-                {enableHelpModal ? (
-                    <span className={`hotkey-layer ${className}`}>
-                        <HotkeyHelpModal isOpen={this.state.isHelpModalOpen} onRequestClose={this.closeHelpModal} />
-                        {children}
-                    </span>
-                ) : (
-                    children
-                )}
-            </Hotkeys>
+            <HotkeyContext.Provider value={this.state}>
+                <Hotkeys configs={this.getHotkeyConfigs()}>
+                    {enableHelpModal ? (
+                        <span className={`hotkey-layer ${className}`}>
+                            <HotkeyHelpModal isOpen={this.state.isHelpModalOpen} onRequestClose={this.closeHelpModal} />
+                            {children}
+                        </span>
+                    ) : (
+                        children
+                    )}
+                </Hotkeys>
+            </HotkeyContext.Provider>
         );
     }
 }

src/components/hotkeys/Hotkeys.js

@@ -2,6 +2,7 @@ import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { HotkeyPropType } from './HotkeyRecord';
+import HotkeyContext from './HotKeyContext';
 
 class Hotkeys extends Component {
     /* eslint-disable no-underscore-dangle */
@@ -12,13 +13,15 @@ class Hotkeys extends Component {
         configs: PropTypes.arrayOf(HotkeyPropType).isRequired,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
+    static contextType = HotkeyContext;
 
     componentDidMount() {
         const { configs } = this.props;
 
+        // should verify this isn't being mounted too many times after making changes
+        console.log('Hotkeys componentDidMount', this.context.hotkeyLayer);
+        console.log(this.context);
+
         if (!this.context.hotkeyLayer) {
             throw new Error('You must instantiate a HotkeyLayer before using Hotkeys');
         }