-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
ResizeListenerExample.tsx
46 lines (41 loc) · 1.23 KB
/
ResizeListenerExample.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { ReactElement, useState } from "react";
import { Checkbox, useChecked } from "@react-md/form";
import { Typography } from "@react-md/typography";
import { ResizeListener } from "@react-md/utils";
import CodeBlock from "components/CodeBlock";
export default function ResizeListenerExample(): ReactElement {
const [size, setSize] = useState(() => {
if (typeof window !== "undefined") {
return window.innerWidth;
}
return 0;
});
const [enabled, handleEnabledChange] = useChecked(true);
const [immediate, handleImmediateChange] = useChecked(true);
return (
<>
<Checkbox
id="resize-enabled"
name="resizeOptions"
checked={enabled}
onChange={handleEnabledChange}
label="Enable Listener"
/>
<Checkbox
id="toggle-resize-listener"
name="resizeOptions"
checked={immediate}
onChange={handleImmediateChange}
label="Invoke on mount"
/>
{enabled && (
<ResizeListener
immediate={immediate}
onResize={() => setSize(window.innerWidth)}
/>
)}
<Typography>The current app size is:</Typography>
<CodeBlock suppressHydrationWarning>{size}px</CodeBlock>
</>
);
}