Skip to content

Commit 4bb3fa6

Browse files
simonguosimonguo
committed
chore: add Next.js example and refine CodeView styles
1 parent 815bba7 commit 4bb3fa6

File tree

12 files changed

+6853
-7624
lines changed

12 files changed

+6853
-7624
lines changed

‎examples/nextjs/README.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Next.js Example
2+
3+
This folder documents how to use **react-code-view** in a Next.js (App Router) project.
4+
5+
## 1) Create a Next.js app
6+
7+
```bash
8+
pnpm create next-app my-rcv-app --ts --eslint
9+
cd my-rcv-app
10+
```
11+
12+
## 2) Install react-code-view
13+
14+
```bash
15+
pnpm add @react-code-view/react @react-code-view/core
16+
```
17+
18+
## 3) Add styles (global)
19+
20+
In `app/layout.tsx` (or `pages/_app.tsx` for Pages Router):
21+
22+
```tsx
23+
import '@react-code-view/react/styles/index.css';
24+
```
25+
26+
## 4) Add a demo page (App Router)
27+
28+
Create `app/rcv-demo/page.tsx`:
29+
30+
```tsx
31+
'use client';
32+
33+
import React from 'react';
34+
import { CodeView } from '@react-code-view/react';
35+
36+
const code = `const Hello = () => <button onClick={() => alert('hi')}>Click</button>;
37+
render(<Hello />);`;
38+
39+
export default function RcvDemoPage() {
40+
return (
41+
<main style={{ padding: 24 }}>
42+
<h1>React Code View in Next.js</h1>
43+
<CodeView
44+
language="tsx"
45+
theme="rcv-theme-default"
46+
renderPreview
47+
showCopyButton
48+
dependencies={{ React }}
49+
>
50+
{code}
51+
</CodeView>
52+
</main>
53+
);
54+
}
55+
```
56+
57+
> If you prefer Pages Router, create `pages/rcv-demo.tsx` with the same content (remove `'use client';` if your project defaults to client components).
58+
59+
## 5) Run
60+
61+
```bash
62+
pnpm dev
63+
# visit http://localhost:3000/rcv-demo
64+
```
65+
66+
## Notes
67+
- No extra Next.js config is required; the package ships ESM/CJS builds consumable by Next.
68+
- Ensure the page/component using `CodeView` is a **client component** (`'use client'`) so hooks can run.
69+
- Import the CSS once (in layout or custom App). You can override CSS variables if needed.
70+
- To customize themes, set the `theme` prop (e.g., `rcv-theme-dark`) and override CSS variables in your global stylesheet.

‎examples/nextjs/app/globals.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
margin: 0;
3+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
4+
background: #f8fafc;
5+
color: #0f172a;
6+
}
7+
8+
.layout {
9+
min-height: 100vh;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.site-header {
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
padding: 16px 24px;
19+
background: #0f172a;
20+
color: #fff;
21+
}
22+
23+
.site-header .logo {
24+
font-weight: 700;
25+
}
26+
27+
.site-header .link {
28+
color: #e2e8f0;
29+
text-decoration: none;
30+
}

‎examples/nextjs/app/layout.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import './globals.css';
3+
import '@react-code-view/react/styles/index.css';
4+
import type { Metadata } from 'next';
5+
import type { ReactNode } from 'react';
6+
7+
export const metadata: Metadata = {
8+
title: 'React Code View · Next.js Example',
9+
description: 'Demo of react-code-view in a Next.js (App Router) project'
10+
};
11+
12+
export default function RootLayout({ children }: { children: ReactNode }) {
13+
return (
14+
<html lang="en">
15+
<body>
16+
<div className="layout">
17+
<header className="site-header">
18+
<div className="logo">React Code View × Next.js</div>
19+
<a className="link" href="/rcv-demo">Open Demo</a>
20+
</header>
21+
<main>{children}</main>
22+
</div>
23+
</body>
24+
</html>
25+
);
26+
}

‎examples/nextjs/app/page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import Link from 'next/link';
5+
6+
export default function Home() {
7+
return (
8+
<main style={{ padding: 24 }}>
9+
<h1>Next.js + React Code View</h1>
10+
<p style={{ margin: '12px 0 20px' }}>
11+
This is a minimal Next.js example showing how to embed react-code-view.
12+
</p>
13+
<Link
14+
href="/rcv-demo"
15+
style={{
16+
padding: '10px 14px',
17+
borderRadius: 8,
18+
border: '1px solid #e2e8f0',
19+
background: '#111827',
20+
color: '#fff',
21+
textDecoration: 'none',
22+
fontWeight: 600
23+
}}
24+
>
25+
View Demo
26+
</Link>
27+
</main>
28+
);
29+
}

‎examples/nextjs/app/rcv-demo/page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { CodeView } from '@react-code-view/react';
5+
6+
const code = `const Hello = () => <button onClick={() => alert('Hi from Next.js!')}>Click me</button>;
7+
8+
render(<Hello />);`;
9+
10+
export default function RcvDemoPage() {
11+
return (
12+
<main style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
13+
<h1>React Code View Demo</h1>
14+
<p style={{ margin: 0 }}>
15+
Live editing and preview inside a Next.js (App Router) page.
16+
</p>
17+
<CodeView
18+
language="tsx"
19+
theme="rcv-theme-default"
20+
renderPreview
21+
showCopyButton
22+
dependencies={{ React }}
23+
defaultShowCode
24+
>
25+
{code}
26+
</CodeView>
27+
</main>
28+
);
29+
}

‎examples/nextjs/next-env.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/nextjs/next.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
transpilePackages: ['@react-code-view/react', '@react-code-view/core']
5+
};
6+
7+
module.exports = nextConfig;

‎examples/nextjs/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "react-code-view-nextjs-example",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@react-code-view/core": "workspace:*",
13+
"@react-code-view/react": "workspace:*",
14+
"next": "14.1.0",
15+
"react": "18.2.0",
16+
"react-dom": "18.2.0"
17+
},
18+
"devDependencies": {
19+
"@types/node": "^20.0.0",
20+
"@types/react": "^18.2.0",
21+
"@types/react-dom": "^18.2.0",
22+
"eslint": "^8.56.0",
23+
"eslint-config-next": "14.1.0",
24+
"typescript": "^5.4.0"
25+
}
26+
}

‎examples/nextjs/tsconfig.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
9+
"allowJs": false,
10+
"skipLibCheck": true,
11+
"strict": true,
12+
"noEmit": true,
13+
"esModuleInterop": true,
14+
"module": "esnext",
15+
"moduleResolution": "node",
16+
"resolveJsonModule": true,
17+
"isolatedModules": true,
18+
"jsx": "preserve",
19+
"incremental": true,
20+
"types": [
21+
"node"
22+
],
23+
"plugins": [
24+
{
25+
"name": "next"
26+
}
27+
]
28+
},
29+
"include": [
30+
"next-env.d.ts",
31+
"**/*.ts",
32+
"**/*.tsx",
33+
".next/types/**/*.ts"
34+
],
35+
"exclude": [
36+
"node_modules"
37+
]
38+
}

‎packages/react-code-view/styles/index.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@
119119
gap: var(--rcv-spacing-sm);
120120
padding: var(--rcv-spacing-sm) var(--rcv-spacing-md);
121121
background-color: var(--rcv-color-bg-toolbar);
122-
border-bottom: 1px solid var(--rcv-color-border);
123122
}
124123

125124
.rcv-code-view__toggle-btn {
@@ -200,18 +199,17 @@
200199
background-color: var(--rcv-color-bg-code);
201200
}
202201

202+
.rcv-code-view--code-visible .rcv-code-view__code {
203+
border-top: 1px solid var(--rcv-color-border);
204+
}
205+
203206
/* ============================================
204207
Code Editor
205208
============================================ */
206209

207-
.rcv-code-editor {
208-
min-height: 100px;
209-
}
210-
211210
.rcv-code-editor__textarea {
212211
display: block;
213212
width: 100%;
214-
min-height: 100px;
215213
padding: var(--rcv-spacing-md);
216214
border: none;
217215
background-color: transparent;
@@ -229,7 +227,6 @@
229227
/* CodeMirror overrides */
230228
.rcv-code-editor .CodeMirror {
231229
height: auto;
232-
min-height: 100px;
233230
font-family: var(--rcv-font-family-mono);
234231
font-size: var(--rcv-font-size-code);
235232
line-height: var(--rcv-line-height-code);

0 commit comments

Comments
 (0)