website: update example.

website/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import GithubCorner from '@uiw/react-github-corners';
 import { Github } from '@uiw/react-shields';
 import MarkdownPreview from '@uiw/react-markdown-preview';
@@ -10,18 +10,13 @@ import DocumentStr from '../README.md';
 import hotkeys from '..';
 import pkg from '../package.json';
 
-export default class App extends Component {
+export default function AppRoot() {
-  constructor() {
+  const [keyCode, setKeyCode] = useState([]);
-    super();
+  const [keyStr, setKeyStr] = useState([]);
-    this.state = {
+
-      keyCode: [],
+  useEffect(() => {
-      keyStr: [],
+    document.addEventListener('keyup', onKeyUpEvent);
-    };
-    this.onKeyUpEvent = this.onKeyUpEvent.bind(this);
-  }
 
-  componentDidMount() {
-    document.addEventListener('keyup', this.onKeyUpEvent);
     function pkeys(keys, key) {
       if (keys.indexOf(key) === -1) keys.push(key);
       return keys;
@@ -30,68 +25,68 @@ export default class App extends Component {
       if (keysStr.indexOf(key) === -1) keysStr.push(key);
       return keysStr;
     }
+
     hotkeys('*', (evn) => {
       evn.preventDefault();
       const keys = [];
-      const keyStr = [];
+      const kStr = [];
       if (hotkeys.shift) {
         pkeys(keys, 16);
-        pkeysStr(keyStr, 'shift');
+        pkeysStr(kStr, 'shift');
       }
       if (hotkeys.ctrl) {
         pkeys(keys, 17);
-        pkeysStr(keyStr, 'ctrl');
+        pkeysStr(kStr, 'ctrl');
       }
       if (hotkeys.alt) {
         pkeys(keys, 18);
-        pkeysStr(keyStr, 'alt');
+        pkeysStr(kStr, 'alt');
       }
       if (hotkeys.control) {
         pkeys(keys, 17);
-        pkeysStr(keyStr, 'control');
+        pkeysStr(kStr, 'control');
       }
       if (hotkeys.command) {
         pkeys(keys, 91);
-        pkeysStr(keyStr, 'command');
+        pkeysStr(kStr, 'command');
       }
-      keyStr.push(evn.keyCode);
+      kStr.push(evn.keyCode);
       if (keys.indexOf(evn.keyCode) === -1) keys.push(evn.keyCode);
-      this.setState({ keyCode: keys, keyStr });
+
+      setKeyCode(keys);
+      setKeyStr(kStr);
     });
-  }
 
-  componentWillUnmount() {
+    return () => {
-    document.removeEventListener('keyup', this.onKeyUpEvent);
+      document.removeEventListener('keyup', onKeyUpEvent);
-  }
+    };
+  }, []);
 
-  onKeyUpEvent() {
+  let DocumentStrSource = DocumentStr;
-    this.setState({ keyCode: [], keyStr: [] });
+  if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
+  const openVersionWebsite = (e) => {
+    if (e.target && e.target.value) {
+      window.location.href = e.target.value;
     }
+  };
 
-  onKeyBoardMouseDown(item) {
+  const onKeyUpEvent = () => {
+    setKeyCode([]);
+    setKeyStr([]);
+  };
+
+  const onKeyBoardMouseDown = (item) => {
     if (item.keycode > -1) {
-      this.setState({ keyStr: [item.keycode] });
+      setKeyStr([item.keycode]);
-    }
     }
+  };
 
-  onKeyBoardMouseUp() {
+  const onKeyBoardMouseUp = () => setKeyStr([]);
-    this.setState({ keyStr: [] });
-  }
 
-  openVersionWebsite(e) {
-    if (e.target && e.target.value) {
-      window.location.href = e.target.value;
-    }
-  }
-
-  render() {
-    const { keyStr, keyCode } = this.state;
-    let DocumentStrSource = DocumentStr;
-    if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
   return (
     <div>
       <div className={styles.tools}>
-          <select className={styles.version} onChange={this.openVersionWebsite.bind(this)}>
+        <select className={styles.version} onChange={openVersionWebsite}>
           <option value="https://jaywcjlove.github.io/hotkeys-js">
             v
             {pkg.version}
@@ -128,8 +123,8 @@ export default class App extends Component {
       </div>
       <KeyBoard
         style={{ top: -40 }}
-          onMouseDown={this.onKeyBoardMouseDown.bind(this)}
+        onMouseDown={onKeyBoardMouseDown.bind(this)}
-          onMouseUp={this.onKeyBoardMouseUp.bind(this)}
+        onMouseUp={onKeyBoardMouseUp}
         keyCode={keyCode}
       />
       <MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
@@ -144,4 +139,3 @@ export default class App extends Component {
     </div>
   );
 }
-}