mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
StevenandGitHub
4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
43 lines
1017 B
TypeScript
43 lines
1017 B
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import Script from "next/script";
|
|
|
|
export default function Lazyload() {
|
|
const [log, setLog] = useState<{ time: Date; text: string }[]>([]);
|
|
|
|
const addLog = useCallback(
|
|
(text: string) => {
|
|
setLog((log) => log.concat({ time: new Date(), text }));
|
|
},
|
|
[setLog],
|
|
);
|
|
|
|
useEffect(() => {
|
|
addLog(`Page loaded window.FB is undefined`);
|
|
}, [addLog]);
|
|
|
|
return (
|
|
<>
|
|
{/* We lazy load the FB SDK */}
|
|
<Script
|
|
src="https://connect.facebook.net/en_US/sdk.js"
|
|
strategy="lazyOnload"
|
|
onLoad={() =>
|
|
addLog(`script loaded correctly, window.FB has been populated`)
|
|
}
|
|
/>
|
|
|
|
<main>
|
|
<h1>Lazy Loading FB sdk</h1>
|
|
<h5>You can check `window.FB` on browser console</h5>
|
|
<ul>
|
|
{log.map(({ time, text }) => (
|
|
<li key={+time}>
|
|
{time.toISOString()}: {text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|