diff --git a/website/App.js b/website/App.js
index da63fd2c..05b6aca9 100644
--- a/website/App.js
+++ b/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 {
-  constructor() {
-    super();
-    this.state = {
-      keyCode: [],
-      keyStr: [],
-    };
-    this.onKeyUpEvent = this.onKeyUpEvent.bind(this);
-  }
+export default function AppRoot() {
+  const [keyCode, setKeyCode] = useState([]);
+  const [keyStr, setKeyStr] = useState([]);
+
+  useEffect(() => {
+    document.addEventListener('keyup', onKeyUpEvent);
 
-  componentDidMount() {
-    document.addEventListener('keyup', this.onKeyUpEvent);
     function pkeys(keys, key) {
       if (keys.indexOf(key) === -1) keys.push(key);
       return keys;
@@ -30,118 +25,117 @@ 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 });
-    });
-  }
 
-  componentWillUnmount() {
-    document.removeEventListener('keyup', this.onKeyUpEvent);
-  }
+      setKeyCode(keys);
+      setKeyStr(kStr);
+    });
 
-  onKeyUpEvent() {
-    this.setState({ keyCode: [], keyStr: [] });
-  }
+    return () => {
+      document.removeEventListener('keyup', onKeyUpEvent);
+    };
+  }, []);
 
-  onKeyBoardMouseDown(item) {
-    if (item.keycode > -1) {
-      this.setState({ keyStr: [item.keycode] });
+  let DocumentStrSource = DocumentStr;
+  if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
+  const openVersionWebsite = (e) => {
+    if (e.target && e.target.value) {
+      window.location.href = e.target.value;
     }
-  }
+  };
 
-  onKeyBoardMouseUp() {
-    this.setState({ keyStr: [] });
-  }
+  const onKeyUpEvent = () => {
+    setKeyCode([]);
+    setKeyStr([]);
+  };
 
-  openVersionWebsite(e) {
-    if (e.target && e.target.value) {
-      window.location.href = e.target.value;
+  const onKeyBoardMouseDown = (item) => {
+    if (item.keycode > -1) {
+      setKeyStr([item.keycode]);
     }
-  }
+  };
+
+  const onKeyBoardMouseUp = () => setKeyStr([]);
 
-  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)}>
-            <option value="https://jaywcjlove.github.io/hotkeys-js">
-              v
-              {pkg.version}
-            </option>
-            <option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
-            <option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option>
-            <option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option>
-          </select>
-          <dark-mode permanent />
+  return (
+    <div>
+      <div className={styles.tools}>
+        <select className={styles.version} onChange={openVersionWebsite}>
+          <option value="https://jaywcjlove.github.io/hotkeys-js">
+            v
+            {pkg.version}
+          </option>
+          <option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
+          <option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option>
+          <option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option>
+        </select>
+        <dark-mode permanent />
+      </div>
+      {keyStr.length > -1 && (
+        <div className={styles.keyCodeInfo}>
+          {keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
         </div>
-        {keyStr.length > -1 && (
-          <div className={styles.keyCodeInfo}>
-            {keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
-          </div>
-        )}
-        <GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
-        <div className={styles.header}>
-          <div className={styles.title}>HotKeys.js</div>
-          <div className={styles.github}>
-            <a href="https://www.npmjs.com/package/hotkeys-js">
-              <button type="button">On NPM</button>
-            </a>
-            <a href="https://github.com/jaywcjlove/hotkeys-js/">
-              <button type="button">Fork on Github</button>
-            </a>
-            <a href="https://github.com/jaywcjlove/hotkeys-js/">
-              <button type="button">Doc on Github</button>
-            </a>
-            <a href="https://jaywcjlove.gitee.io/hotkeys/">
-              <button type="button">Doc on Gitee</button>
-            </a>
-          </div>
-          <div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
+      )}
+      <GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
+      <div className={styles.header}>
+        <div className={styles.title}>HotKeys.js</div>
+        <div className={styles.github}>
+          <a href="https://www.npmjs.com/package/hotkeys-js">
+            <button type="button">On NPM</button>
+          </a>
+          <a href="https://github.com/jaywcjlove/hotkeys-js/">
+            <button type="button">Fork on Github</button>
+          </a>
+          <a href="https://github.com/jaywcjlove/hotkeys-js/">
+            <button type="button">Doc on Github</button>
+          </a>
+          <a href="https://jaywcjlove.gitee.io/hotkeys/">
+            <button type="button">Doc on Gitee</button>
+          </a>
         </div>
-        <KeyBoard
-          style={{ top: -40 }}
-          onMouseDown={this.onKeyBoardMouseDown.bind(this)}
-          onMouseUp={this.onKeyBoardMouseUp.bind(this)}
-          keyCode={keyCode}
-        />
-        <MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
-        <Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
-          <Github user="jaywcjlove" repo="hotkeys-js">
-            <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
-            <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
-            <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
-            <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
-          </Github>
-        </Footer>
+        <div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
       </div>
-    );
-  }
+      <KeyBoard
+        style={{ top: -40 }}
+        onMouseDown={onKeyBoardMouseDown.bind(this)}
+        onMouseUp={onKeyBoardMouseUp}
+        keyCode={keyCode}
+      />
+      <MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
+      <Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
+        <Github user="jaywcjlove" repo="hotkeys-js">
+          <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
+          <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
+          <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
+          <Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
+        </Github>
+      </Footer>
+    </div>
+  );
 }