feat: add react ssr example

This commit is contained in:
Rongjian Zhang 2020-06-21 16:46:59 +08:00
parent 147c343fd1
commit 80fa166b1f
6 changed files with 141 additions and 0 deletions

30
examples/react-ssr/.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

View File

@ -0,0 +1,3 @@
# example-react-ssr
An example to use ByteMD in React SSR with Next.js

View File

@ -0,0 +1,15 @@
{
"name": "example-react-ssr",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "9.4.4",
"react": "16.13.1",
"react-dom": "16.13.1"
}
}

8
examples/react-ssr/pages/_app.js vendored Normal file
View File

@ -0,0 +1,8 @@
import 'github-markdown-css';
import 'highlight.js/styles/vs.css';
import 'katex/dist/katex.css';
import 'bytemd/dist/index.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}

85
examples/react-ssr/pages/index.js vendored Normal file
View File

@ -0,0 +1,85 @@
import Head from 'next/head';
import { Editor } from 'bytemd/react';
import highlight from '@bytemd/plugin-highlight';
import math from '@bytemd/plugin-math';
// import mermaid from '@bytemd/plugin-mermaid';
import { useMemo, useState, useEffect, Fragment } from 'react';
export default function Home() {
const [value, setValue] = useState('');
const [enabled, setEnabled] = useState({
mermaid: true,
highlight: true,
math: true,
});
useEffect(() => {
const init = async () => {
const res = await fetch(
'https://raw.githubusercontent.com/bytedance/bytemd/master/assets/demo.md'
);
const text = await res.text();
setValue(text);
};
init();
}, []);
const plugins = useMemo(
() =>
[
// enabled.mermaid && mermaid(), // TODO: https://github.com/vercel/next.js/issues/706
enabled.highlight && highlight(),
enabled.math && math(),
].filter((x) => x),
[enabled]
);
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div style={{ padding: '10px 0' }}>
Plugins:
{['math', 'highlight', 'mermaid'].map((p) => (
<Fragment key={p}>
{' '}
<label>
<input
type="checkbox"
checked={enabled[p]}
onChange={(e) => {
const { checked } = e.target;
setEnabled((v) => ({
...v,
[p]: checked,
}));
}}
/>
{p}
</label>
</Fragment>
))}
</div>
<Editor
value={value}
plugins={plugins}
onChange={(v) => {
setValue(v);
}}
/>
<style jsx global>{`
body {
margin: 0 10px;
}
.bytemd {
height: 90vh !important;
}
`}</style>
</div>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB