website: update example.

uiwjs · Aug 30, 2022 · 3a230f9 · 3a230f9
1 parent 2a764ff
commit 3a230f9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -65,8 +65,8 @@ ReactDOM.render(<Dome />, document.getElementById('app'));
 
 ```jsx
 import MarkdownEditor from '@uiw/react-markdown-editor';
+import { createRoot } from 'react-dom/client';
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 
 function App() {
   const [markdown, setMarkdown] = useState("");
@@ -78,7 +78,7 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+export default App;
 ```
 
 ## Custom Toolbars
@@ -135,7 +135,7 @@ const Dome = () => (
   />
 );
 
-ReactDOM.render(<Dome />, document.getElementById('app'));
+export default Dome;
 ```
 
 ## Support Nextjs

diff --git a/website/App.tsx b/website/App.tsx
@@ -1,21 +1,16 @@
-import { useState } from 'react';
 import BackToUp from '@uiw/react-back-to-top';
 import GithubCorner from '@uiw/react-github-corners';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import '@wcj/dark-mode';
 import DocumentStr from '../README.md';
-import MarkdownEditor from '../';
 import styles from './App.module.less';
 import Footer from './components/Footer';
 import { ReactComponent as Logo } from './logo.svg';
+import { Example } from './Example';
 
 const DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '').replace(/^\n*/g, '');
-let count = 1;
 
 export default function App() {
-  const [visible, setVisible] = useState(true);
-  const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
-  const [hideToolbar, setHideToolbar] = useState(true);
   return (
     <div className={styles.warpper}>
       <BackToUp>Top</BackToUp>
@@ -24,25 +19,7 @@ export default function App() {
       <div className={styles.logo}>
         <Logo style={{ fill: 'currentColor' }} />
       </div>
-      <div className={styles.editor}>
-        <MarkdownEditor visible={visible} height="500px" value={mdstr} hideToolbar={hideToolbar} />
-        <div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
-          <button
-            onClick={() => {
-              count += 1;
-              setMdstr(`String ${count}`);
-            }}
-          >
-            Modify Markdown
-          </button>
-          <label>
-            <input type="checkbox" checked={hideToolbar} onChange={(evn) => setHideToolbar(evn.target.checked)} />
-            hideToolbar
-          </label>
-          <button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
-          <span>v{VERSION}</span>
-        </div>
-      </div>
+      <Example />
       <MarkdownPreview source={DocumentStrSource} className={styles.doc} />
       <Footer
         name="Kenny Wong"

diff --git a/website/Example.tsx b/website/Example.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import MarkdownEditor from '../';
+import DocumentStr from '../README.md';
+import styles from './App.module.less';
+
+const DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '').replace(/^\n*/g, '');
+let count = 1;
+
+export function Example() {
+  const [visible, setVisible] = useState(true);
+  const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
+  const [hideToolbar, setHideToolbar] = useState(true);
+  return (
+    <div className={styles.editor}>
+      <MarkdownEditor visible={visible} height="500px" value={mdstr} hideToolbar={hideToolbar} />
+      <div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
+        <button
+          onClick={() => {
+            count += 1;
+            setMdstr(`String ${count}`);
+          }}
+        >
+          Modify Markdown
+        </button>
+        <label>
+          <input type="checkbox" checked={hideToolbar} onChange={(evn) => setHideToolbar(evn.target.checked)} />
+          hideToolbar
+        </label>
+        <button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
+        <span>v{VERSION}</span>
+      </div>
+    </div>
+  );
+}