chore: modify example.

Author: jaywcjlove

src/index.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import * as React from "react";
+import React, { useState, createRef, useRef, useEffect } from 'react';
 import { IProps } from './common/props';
 import CodeMirror, { ICodeMirror } from './components/CodeMirror';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
@@ -28,13 +28,13 @@ export default function MarkdownEditor(props: IMarkdownEditor) {
     visible = true,
     visibleEditor = true,
     previewProps = {}, ...codemirrorProps } = props;
-  const [value, setValue] = React.useState(props.value || '');
-  const codeMirror = React.createRef<CodeMirror>();
-  const previewContainer = React.useRef<HTMLDivElement | null>()
-  const [editor, setEditor] = React.useState<CodeMirror.Editor>();
-	const container = React.useRef<HTMLDivElement>(null);
-	const containerEditor = React.useRef<HTMLDivElement>(null);
-  React.useEffect(() => {
+  const [value, setValue] = useState(props.value || '');
+  const codeMirror = createRef<CodeMirror>();
+  const previewContainer = useRef<HTMLDivElement | null>()
+  const [editor, setEditor] = useState<CodeMirror.Editor>();
+	const container = useRef<HTMLDivElement>(null);
+	const containerEditor = useRef<HTMLDivElement>(null);
+  useEffect(() => {
     if (codeMirror.current) {
       setEditor(codeMirror.current.editor);
     }

website/App.tsx

@@ -1,6 +1,6 @@
 import MarkdownEditor from '../';
 import '@uiw/reset.css/reset.less';
-import * as React from 'react';
+import React, { useState } from 'react';
 import DocumentStr from '../README.md';
 import styles from './App.module.less';
 import Footer from './components/Footer';
@@ -9,50 +9,35 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
 import Logo from './Logo';
 
 const DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '').replace(/^\n*/g, '');
-
-interface IAppState {
-  mdstr: string;
-  visible: boolean;
-}
-
 let count = 1;
 
-export default class App extends React.Component<any, IAppState> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      mdstr: DocumentStrSource,
-      visible: true,
-    }
-  }
-  public render() {
-    return (
-      <div className={styles.warpper}>
-        <GithubCorner fixed target="__blank" href="https://github.com/uiwjs/react-markdown-editor" />
-        <div className={styles.logo}>
-          <Logo />
-        </div>
-        <div className={styles.editor}>
-          <button onClick={() => {
-            count += 1;
-            this.setState({ mdstr: `String ${count}` });
-          }}>Modify Markdown</button>
-          <button onClick={() => {
-            this.setState({ visible: !this.state.visible })
-          }}>{this.state.visible ? 'Show' : 'Hide'}</button>
-          <MarkdownEditor
-            visible={this.state.visible}
-            options={{
-              autofocus: true,
-              showCursorWhenSelecting: true,
-            }}
-            height={500}
-            value={this.state.mdstr}
-          />
-        </div>
-        <MarkdownPreview source={DocumentStrSource} className={styles.doc} />
-        <Footer name="Kenny Wong" href="https://github.com/uiwjs/react-markdown-editor" github="https://github.com/uiwjs/react-markdown-editor" year={2019}/>
+export default function App() {
+  const [visible, setVisible] = useState(true);
+  const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
+  return (
+    <div className={styles.warpper}>
+      <GithubCorner fixed target="__blank" href="https://github.com/uiwjs/react-markdown-editor" />
+      <div className={styles.logo}>
+        <Logo />
       </div>
-    );
-  }
-}
+      <div className={styles.editor}>
+        <button onClick={() => {
+          count += 1;
+          setMdstr(`String ${count}`);
+        }}>Modify Markdown</button>
+        <button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
+        <MarkdownEditor
+          visible={visible}
+          options={{
+            autofocus: true,
+            showCursorWhenSelecting: true,
+          }}
+          height={500}
+          value={mdstr}
+        />
+      </div>
+      <MarkdownPreview source={DocumentStrSource} className={styles.doc} />
+      <Footer name="Kenny Wong" href="https://github.com/uiwjs/react-markdown-editor" github="https://github.com/uiwjs/react-markdown-editor" year={2019}/>
+    </div>
+  );
+}

website/declaration.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react-scripts" />
+
+declare module '*.module.less' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.md' {
+  const src: any;
+  export default src;
+}