leaflet.pub
a tool for shared writing and social publishing
set size in react too
the theory is react is remove the variable on body ?
awarm.space
+15
-2
-2
app/layout.tsx
-2
app/layout.tsx
···
43
43
let listener = () => {
44
44
console.log("firing listener", window.innerHeight, window.innerWidth)
45
45
let el = document.querySelector(":root");
46
-
console.log(el)
47
46
el.style.setProperty("--leaflet-height-unitless", window.innerHeight)
48
47
el.style.setProperty("--leaflet-width-unitless", window.innerWidth)
49
48
}
···
52
51
} else {
53
52
document.addEventListener('DOMContentLoaded', listener);
54
53
}
55
-
window.addEventListener("resize", listener)
56
54
`,
57
55
}}
58
56
/>
+15
components/InitialPageLoadProvider.tsx
+15
components/InitialPageLoadProvider.tsx
···
5
5
export const useInitialPageLoad = create(() => false);
6
6
export function InitialPageLoad(props: { children: React.ReactNode }) {
7
7
useEffect(() => {
8
+
let listener = () => {
9
+
console.log("firing listener", window.innerHeight, window.innerWidth);
10
+
document.documentElement.style.setProperty(
11
+
"--leaflet-height-unitless",
12
+
window.innerHeight.toString(),
13
+
);
14
+
document.documentElement.style.setProperty(
15
+
"--leaflet-width-unitless",
16
+
window.innerWidth.toString(),
17
+
);
18
+
};
19
+
window.addEventListener("resize", listener);
20
+
return () => window.removeEventListener("resize", listener);
21
+
});
22
+
useEffect(() => {
8
23
setTimeout(() => {
9
24
useInitialPageLoad.setState(() => true);
10
25
}, 80);