Skip to content

Commit 2fd2979

Browse files
committed
doc: update README.md #31
1 parent a5fbdf4 commit 2fd2979

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

Diff for: README.md

+56
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ A simple code editor with syntax highlighting. This library aims to provide a si
1212
- 🐲 Automatic indent on new lines.
1313
- 🩲 Indent line or selected text by pressing tab key, with customizable indentation.
1414
- 🌸 Wrap selected text in parens, <kbd>[]</kbd>, <kbd>()</kbd>, <kbd><></kbd>, <kbd>{}</kbd>, <kbd>""</kbd>, <kbd>''</kbd>, <kbd>""</kbd>, <kbd>``</kbd>
15+
- 💡 Support [next.js](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341), [Use examples](#support-nextjs) in [next.js](https://nextjs.org/).
1516

1617
## Install
1718

@@ -48,6 +49,61 @@ function App() {
4849
}
4950
```
5051

52+
## Support Nextjs
53+
54+
Use examples in nextjs. [#31](https://github.com/uiwjs/react-textarea-code-editor/issues/31#issuecomment-909363339)
55+
56+
[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-textarea-code-editor-example-nextjs-gdzlw?fontsize=14&hidenavigation=1&theme=dark)
57+
58+
```bash
59+
npm install next-remove-imports
60+
npm install @uiw/[email protected]
61+
```
62+
63+
```js
64+
// next.config.js
65+
const removeImports = require("next-remove-imports")();
66+
module.exports = removeImports({
67+
experimental: { esmExternals: true }
68+
});
69+
```
70+
71+
```jsx
72+
import React from "react";
73+
import dynamic from "next/dynamic";
74+
import "@uiw/react-textarea-code-editor/dist.css";
75+
76+
const CodeEditor = dynamic(
77+
() => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
78+
{ ssr: false }
79+
);
80+
81+
function HomePage() {
82+
const [code, setCode] = React.useState(
83+
`function add(a, b) {\n return a + b;\n}`
84+
);
85+
return (
86+
<div>
87+
<CodeEditor
88+
value={code}
89+
language="js"
90+
placeholder="Please enter JS code."
91+
onChange={(evn) => setCode(evn.target.value)}
92+
padding={15}
93+
style={{
94+
fontSize: 12,
95+
backgroundColor: "#f5f5f5",
96+
fontFamily:
97+
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
98+
}}
99+
/>
100+
</div>
101+
);
102+
}
103+
104+
export default HomePage;
105+
```
106+
51107
## Props
52108

53109
```ts

0 commit comments

Comments
 (0)