Skip to content

Commit

Permalink
website: update example.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Sep 7, 2021
1 parent c313dca commit 3b09a0d
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 6 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
**Features:**

🚀 Quickly and easily configure the API.
🌱 Use [codemirror 6](https://github.com/uiwjs/react-codemirror/issues/88).
🌱 Use [codemirror 6](https://codemirror.net/6/). [#88](https://github.com/uiwjs/react-codemirror/issues/88).
⚛️ Support the features of React Hook(requires React 16.8+).
📚 Use Typescript to write, better code hints.
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
Expand Down
3 changes: 3 additions & 0 deletions website/App.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,9 @@ body {
.footer {
text-align: center;
padding-top: 30px;
a {
text-decoration: none;
}
}

.codemirror {
Expand Down
11 changes: 6 additions & 5 deletions website/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@ import { Select } from './Select';
const langs: Record<string, any> = { javascript, html, css, json, python, markdown, xml, sql, java, rust, cpp, lezer, php };

const hyperlink: { href: string; label: string; style?: React.CSSProperties; }[] = [
{
href: 'https://github.com/uiwjs/react-codemirror',
label: 'View on GitHub',
},
{
href: 'https://www.npmjs.com/package/@uiw/react-codemirror',
label: 'View on NPM',
Expand All @@ -51,6 +47,9 @@ const hyperlink: { href: string; label: string; style?: React.CSSProperties; }[]
const themeOptions = [ 'dark', 'light' ];
const heightOptions = [ 'auto', '200px', '300px', '500px' ];


let count = 0

export default function App() {
const [mode, setMode] = useState('javascript');
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>('light');
Expand Down Expand Up @@ -120,7 +119,9 @@ export default function App() {
<Select label="Lang" options={Object.keys(langs)} value={mode} onChange={(evn) => handleLangChange(evn.target.value)} />
<Select label="Theme" options={themeOptions} value={theme} onChange={(evn) => setTheme(evn.target.value as ReactCodeMirrorProps['theme'])} />
<Select label="Height" options={heightOptions} value={height} onChange={(evn) => setHeight(evn.target.value)} />
<button onClick={() => setCode('console.log("Hello World!")')}>
<button onClick={() => {
count++; setCode(`console.log("Hello World! ${count}")`);
}}>
change code
</button>
</div>
Expand Down

0 comments on commit 3b09a0d

Please sign in to comment.