Skip to content

Commit 487a07f

Browse files
FatahChanFatahChan
committed
docs(examples): Lanes Example
1 parent 3282a53 commit 487a07f

File tree

8 files changed

+196
-0
lines changed

8 files changed

+196
-0
lines changed

‎examples/react/lanes/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/react/lanes/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎examples/react/lanes/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script type="module" src="/src/main.tsx"></script>
10+
</body>
11+
</html>

‎examples/react/lanes/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "tanstack-react-virtual-example-lanes",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"serve": "vite preview"
9+
},
10+
"dependencies": {
11+
"@tanstack/react-virtual": "^3.13.6",
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/node": "^22.13.6",
17+
"@types/react": "^18.3.20",
18+
"@types/react-dom": "^18.3.6",
19+
"@vitejs/plugin-react": "^4.4.1",
20+
"typescript": "5.2.2",
21+
"vite": "^5.4.18"
22+
}
23+
}

‎examples/react/lanes/src/index.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
html {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
body {
7+
padding: 1rem;
8+
}
9+
10+
.List {
11+
border: 1px solid #e6e4dc;
12+
max-width: 100%;
13+
}
14+
15+
.ListItemEven,
16+
.ListItemOdd {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
.ListItemEven {
23+
background-color: #e6e4dc;
24+
}
25+
26+
button {
27+
border: 1px solid gray;
28+
}

‎examples/react/lanes/src/main.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import * as React from 'react'
2+
import * as ReactDOM from 'react-dom/client'
3+
4+
import './index.css'
5+
6+
import { useVirtualizer } from '@tanstack/react-virtual'
7+
8+
function App() {
9+
return (
10+
<div>
11+
<p>
12+
<strong>Lanes</strong> are useful when you are trying to draw a grid of items, where
13+
each row is split into multiple columns.
14+
</p>
15+
<br />
16+
<br />
17+
18+
<h3>Lanes</h3>
19+
<LanesVirtualizer />
20+
<br />
21+
<br />
22+
{process.env.NODE_ENV === 'development' ? (
23+
<p>
24+
<strong>Notice:</strong> You are currently running React in
25+
development mode. Rendering performance will be slightly degraded
26+
until this application is built for production.
27+
</p>
28+
) : null}
29+
</div>
30+
)
31+
}
32+
33+
const NUM_LANES = 5
34+
35+
function LanesVirtualizer() {
36+
const parentRef = React.useRef(null)
37+
38+
const rowVirtualizer = useVirtualizer({
39+
count: 10000,
40+
getScrollElement: () => parentRef.current,
41+
estimateSize: () => 35,
42+
overscan: 5,
43+
lanes: NUM_LANES,
44+
})
45+
46+
return (
47+
<>
48+
<div
49+
ref={parentRef}
50+
className="List"
51+
style={{
52+
height: "200px",
53+
width: "400px",
54+
overflow: "auto",
55+
}}
56+
>
57+
<div
58+
style={{
59+
height: `${rowVirtualizer.getTotalSize()}px`,
60+
width: '100%',
61+
position: 'relative',
62+
}}
63+
>
64+
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
65+
<div
66+
key={virtualRow.index}
67+
className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
68+
style={{
69+
position: 'absolute',
70+
top: 0,
71+
left: `calc(${virtualRow.index % NUM_LANES} * 100% / ${NUM_LANES})`,
72+
width: `calc(100% / ${NUM_LANES})`,
73+
height: `${virtualRow.size}px`,
74+
transform: `translateY(${virtualRow.start}px)`,
75+
}}
76+
>
77+
Cell {virtualRow.index}
78+
</div>
79+
))}
80+
</div>
81+
</div>
82+
</>
83+
)
84+
}
85+
86+
// eslint-disable-next-line
87+
ReactDOM.createRoot(document.getElementById('root')!).render(
88+
<React.StrictMode>
89+
<App />
90+
</React.StrictMode>,
91+
)

‎examples/react/lanes/tsconfig.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"composite": true,
3+
"compilerOptions": {
4+
"target": "ES2020",
5+
"useDefineForClassFields": true,
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"module": "ESNext",
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "Bundler",
12+
"allowImportingTsExtensions": true,
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"noEmit": true,
16+
"jsx": "react-jsx",
17+
18+
/* Linting */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"noFallthroughCasesInSwitch": true
23+
},
24+
"include": ["src"]
25+
}

‎examples/react/lanes/vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

0 commit comments

Comments
 (0)