From 9436389af341989cee41bcc7e67fc9ba344fe9b2 Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Tue, 3 Oct 2023 09:29:57 -0400 Subject: [PATCH] Update useWindowSize docs as per feedback --- website/docs/styling-layout.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/website/docs/styling-layout.mdx b/website/docs/styling-layout.mdx index 783a7940a023..0561bddcc95b 100644 --- a/website/docs/styling-layout.mdx +++ b/website/docs/styling-layout.mdx @@ -180,7 +180,11 @@ Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. I } ``` -:::tip Header and Sidebar Some components, such as the header and sidebar, use a `useWindowSize` hook to set their breakpoint value. If you change the breakpoint value in your custom CSS, you probably also want to update the invocations of the `useWindowSize` hook by swizzling the components it's used in and passing it an argument that updates the breakpoint value (for example, to change the breakpoint to 796px, pass the object `{ desktopThresholdWidth: 796 }` as an argument to the `useWindowSize` hook). ::: +:::tip Customizing the breakpoint + +Some React components, such as the header and the sidebar, implement different JavaScript logic when in mobile view by calling the [`useWindowSize`](./swizzling.mdx) hook. If you change the breakpoint value in your custom CSS, you probably also want to update the invocations of the `useWindowSize` hook by swizzling the components it's used in and passing an explicit option argument. For example, to change the breakpoint to 796px, pass the argument `796` to the `useWindowSize` hook. + +::: ## CSS modules {#css-modules}