You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- optional debounce to delay updates until user stops dragging their window for a moment; this can make expensive components with size-dependent calculations run much faster and your app feel smoother.
17
17
- debouncing does not create new handlers or waste re-renders in your component; the results are also pooled from only one resize result.
18
18
- optional hash function to update component subtree only at points you would like to.
19
-
- supports lazy loaded components and SSR out of the box (see example SSR under Usage section).
19
+
- supports lazy loaded components and SSR out of the box.
20
20
21
21
22
22
## Usage ##
@@ -123,29 +123,6 @@ function MyBreakpointBehaviorComponent() {
123
123
}
124
124
```
125
125
126
-
### **Server Side Rendering**
127
-
128
-
*Note: While serverside rendering is supported, it requires an explicit update via `useEffect` since viewport does not actually exist on the server before rendering to client. The following has been tested with [NextJS](https://nextjs.org/).*
129
-
130
-
*Sidenote that you will see a `useLayoutEffect` warning from React. This is perfectly expected as there is no viewport/context to paint to when pre-rendering in SSR and will not interfere with your app once served to the client*
// in order to register the client's viewport sizes
141
-
// after serving SSR content
142
-
143
-
useEffect(()=> { updateVpSizes() }, []);
144
-
145
-
// ...renderLogic
146
-
}
147
-
```
148
-
149
126
## Support
150
127
If you find any issues or would like to request something changed, please feel free to [post an issue on Github](https://github.com/rob2d/use-viewport-sizes/issues/new).
Copy file name to clipboardExpand all lines: package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
{
2
2
"name": "use-viewport-sizes",
3
-
"version": "0.6.1",
3
+
"version": "0.7.0-alpha.0",
4
4
"description": "a tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce or custom memo function for updates for optimal rendering.",
0 commit comments