LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 12:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add multi-element ref for React sample

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-07 19:00:37 -08:00
parent 2f3c442be6
commit f611c2616f
6 changed files with 2156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>React Multi-Element Ref - Example #63 - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-multi-element-ref-63",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.4",
"vite": "^4.4.9"
}
}

42
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/src/main.jsx Normal file
View File

@@ -0,0 +1,42 @@
import { createRoot } from "react-dom/client";
import { useRef } from "react";
const messages = [
"The new slides for the design keynote look wonderful!",
"Some great new colours are planned to debut with Material Next!",
"Hey everyone! Please take a look at the resources I’ve attached.",
"So on Friday we were thinking about going through that park you’ve recommended.",
"We will discuss our upcoming Pixel 6 strategy in the following week.",
"On Thursday we drew some great new ideas for our talk.",
"So the design teams got together and decided everything should be made of sand.",
];
function App() {
const messagesRef = useRef([]);
const scrollToTop = () => {
messagesRef.current[0].scrollIntoView();
};
const scrollToBottom = () => {
messagesRef.current[messagesRef.current.length - 1].scrollIntoView();
};
return (
<div>
<button onClick={scrollToTop}>Scroll to top</button>
<ul style={{ height: "50px", overflow: "scroll" }}>
{messages.map((message, i) => {
return (
<li key={message} ref={(el) => (messagesRef.current[i] = el)}>
{message}
</li>
);
})}
</ul>
<button onClick={scrollToBottom}>Scroll to bottom</button>
</div>
);
}
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-multi-element-ref-63/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});