Convert Luckysheet to a function component

.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+charset = utf-8
+indent_size = 4
+
+[*.{js, ts, css}]
+indent_size = 2
+quote_type = single

src/App.js

@@ -2,11 +2,11 @@ import React from 'react';
 import './App.css';
 import Luckysheet from './component/Luckysheet'
 
-function App() {
+const App = () => {
   return (
     <div className="App">
       <header className="App-header">
-          <Luckysheet/>
+        <Luckysheet />
       </header>
     </div>
   );

src/component/Luckysheet.js

@@ -1,29 +1,26 @@
-import React from 'react';
-class Luckysheet extends React.Component {
+import React, { useEffect } from 'react';
 
-    componentDidMount() {
-        const luckysheet = window.luckysheet;
-        luckysheet.create({
-            container: "luckysheet",
-        });
-    }
-    render() {
-        const luckyCss = {
-            margin: '0px',
-            padding: '0px',
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            left: '0px',
-            top: '0px'
-        }
-        return (
-            <div
-            id="luckysheet"
-            style={luckyCss}
-            ></div>
-        )
-    }
+const Luckysheet = () => {
+  useEffect(() => {
+    const luckysheet = window.luckysheet;
+    luckysheet.create({
+      container: 'luckysheet',
+    });
+  }, []);
+
+  const luckyCss = {
+    margin: '0px',
+    padding: '0px',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    left: '0px',
+    top: '0px'
+  };
+
+  return (
+    <div id="luckysheet" style={luckyCss}></div>
+  );
 }
 
-export default Luckysheet
+export default Luckysheet;