feat: onEscapeKey

README.md

@@ -19,6 +19,7 @@ Now you could __focus on__ a single task.
  - `[onActivation]` - on activation callback
  - `[onDeactivation]` - on deactivation callback
  - `[onClickOutside]` - on click outside of "focus" area. (actually on any event "outside")
+ - `[onEscapeKey]` - on Esc key pressed (and not defaultPrevented)
 
 ## Additional API
 ### Exposed from React-Focus-Lock

example/app.tsx

@@ -14,18 +14,24 @@ export default class App extends Component <{}, AppState> {
     enabled: false
   };
 
+  toggle = () => this.setState({enabled: !this.state.enabled});
+
   render() {
     return (
       <AppWrapper>
         <FocusPane>
           <GHCorner openInNewTab href={repoUrl}/>
           <button>outside</button>
           outside
-          <FocusOn enabled={this.state.enabled}>
+          <FocusOn
+            enabled={this.state.enabled}
+            onClickOutside={this.toggle}
+            onEscapeKey={this.toggle}
+          >
             inside
             <button>inside</button>
 
-            <button onClick={() => this.setState({enabled: !this.state.enabled})}>toggle</button>
+            <button onClick={this.toggle}>toggle</button>
             <MoveFocusInside key={`k-${this.state.enabled}`}>
               <button>inside</button>
             </MoveFocusInside>
@@ -34,8 +40,11 @@ export default class App extends Component <{}, AppState> {
           <button>outside</button>
           Example!
           {
-            Array(100).fill(1).map((_, x) => <div key={`k${x}`}>{Array(100).fill(1).map((_, x) => <span
-              key={`k${x}`}> *{x}</span>}</div>)
+            Array(100).fill(1).map((_, x) =>
+              <div key={`k${x}`}>
+                {Array(100).fill(1).map((_, x) => <span key={`k${x}`}> *{x}</span>)}
+              </div>
+            )
           }
         </FocusPane>
       </AppWrapper>

src/component.tsx

@@ -9,7 +9,9 @@ export interface ReactFocusOnProps {
   autoFocus?: boolean;
   onActivation?: (node: HTMLElement) => void;
   onDeactivation?: () => void;
+
   onClickOutside?: () => void;
+  onEscapeKey?: (event: Event) => void;
 }
 
 export class ReactFocusOn extends Component<ReactFocusOnProps> {
@@ -21,14 +23,26 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
     if (onActivation) {
       onActivation(node);
     }
+    node.addEventListener('keyup', this.onKeyPress);
   };
 
-  onDeactivation = () => {
+  onDeactivation = (node: HTMLElement) => {
     this._undo!();
     const {onDeactivation} = this.props;
     if (onDeactivation) {
       onDeactivation();
     }
+    node.removeEventListener('keyup', this.onKeyPress);
+  };
+
+  onKeyPress = (event: KeyboardEvent) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const code = event.key || event.keyCode;
+    if ((event.code === 'Escape' || code === 27) && this.props.onEscapeKey) {
+      this.props.onEscapeKey(event);
+    }
   };
 
   render() {