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 forwardRef and imperativeHandle code samples

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-13 19:08:46 -08:00
parent fd77d9bfdc
commit 7d487793b6
31 changed files with 10675 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/.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-component-reference/ffg-fundamentals-react-broken-forward-ref-67/index.html Normal file
View File

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

2056
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-broken-forward-ref-67",
"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"
}
}

16
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/src/main.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { createRoot } from "react-dom/client";
const Component = ({ ref, style }) => {
return <div ref={ref} style={style} />;
};
const App = () => {
return (
<Component
ref={(el) => alert(el)}
style={{ height: 100, width: 100, backgroundColor: "red" }}
/>
);
};
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/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()],
});

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-comp-ref-intro-66/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React Comp Ref Intro - Example #65 - FFG Fundamentals</title> <title>React Comp Ref Intro - Example #66 - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/.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-component-reference/ffg-fundamentals-react-renamed-ref-67/index.html Normal file
View File

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

2056
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-renamed-ref-67",
"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"
}
}

16
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/src/main.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { createRoot } from "react-dom/client";
const Component = ({ divRef, style }) => {
return <div ref={divRef} style={style} />;
};
const App = () => {
return (
<Component
divRef={(el) => alert(el)}
style={{ height: 100, width: 100, backgroundColor: "red" }}
/>
);
};
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/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()],
});

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/.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-component-reference/ffg-fundamentals-react-use-imperative-handle-67/index.html Normal file
View File

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

2056
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-use-imperative-handle-67",
"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"
}
}

27
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/src/main.jsx Normal file
View File

@@ -0,0 +1,27 @@
import { createRoot } from "react-dom/client";
import { forwardRef, useImperativeHandle } from "react";
const Component = forwardRef((props, ref) => {
useImperativeHandle(ref, () => {
// Anything returned here will be assigned to the forwarded `ref`
return {
pi: 3.14,
sayHi() {
alert("Hello, world");
},
};
});
return <div style={props.style} />;
});
const App = () => {
return (
<Component
ref={(el) => console.log(el)}
style={{ height: 100, width: 100, backgroundColor: "red" }}
/>
);
};
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/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()],
});

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/.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-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>React useImperativeHandle Fn Use - Example #67 - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2056
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-use-imperative-handle-fn-use-67",
"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"
}
}

28
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/src/main.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { createRoot } from "react-dom/client";
import { forwardRef, useImperativeHandle, useRef } from "react";
const Component = forwardRef((props, ref) => {
useImperativeHandle(ref, () => {
// Anything returned here will be assigned to the forwarded `ref`
return {
pi: 3.14,
sayHi() {
alert("Hello, world");
},
};
});
return <div style={props.style} />;
});
const App = () => {
const compRef = useRef();
return (
<>
<button onClick={() => compRef.current.sayHi()}>Say hi</button>
<Component ref={compRef} />
</>
);
};
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/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()],
});

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/.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-component-reference/ffg-fundamentals-react-working-forward-ref-67/index.html Normal file
View File

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

2056
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-working-forward-ref-67",
"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"
}
}

17
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/src/main.jsx Normal file
View File

@@ -0,0 +1,17 @@
import { createRoot } from "react-dom/client";
import { forwardRef } from "react";
const Component = forwardRef((props, ref) => {
return <div ref={ref} style={props.style} />;
});
const App = () => {
return (
<Component
ref={(el) => alert(el)}
style={{ height: 100, width: 100, backgroundColor: "red" }}
/>
);
};
createRoot(document.getElementById("root")).render(<App />);

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/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()],
});