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
*registers dimension changes on every resize event immediately*
35
35
36
36
```js
37
-
importReactfrom'react'
38
37
importuseViewportSizesfrom'use-viewport-sizes'
39
38
40
39
functionMyComponent(props) {
@@ -52,7 +51,6 @@ The only dimension returned in the return array value will be the width or heigh
52
51
to what was passed.
53
52
54
53
```js
55
-
importReactfrom'react';
56
54
importuseViewportSizesfrom'use-viewport-sizes';
57
55
58
56
functionMyComponent(props) {
@@ -72,7 +70,6 @@ This is useful for listening to expensive components such as data grids which ma
72
70
expensive to re-render during window resize dragging.
73
71
74
72
```js
75
-
importReactfrom'react';
76
73
importuseViewportSizesfrom'use-viewport-sizes';
77
74
78
75
functionMyExpensivelyRenderedComponent(props) {
@@ -88,7 +85,6 @@ If passed `options.debounceTimeout`, dimension changes are registered only when
88
85
important to update viewport the entire way that a user is resizing.
89
86
90
87
```js
91
-
importReactfrom'react';
92
88
importuseViewportSizesfrom'use-viewport-sizes';
93
89
94
90
functionMyExpensivelyRenderedComponent(props) {
@@ -102,7 +98,6 @@ function MyExpensivelyRenderedComponent(props) {
102
98
If passed an `options.hasher` function, this will be used to calculate a hash that only updates the viewport when the calculation changes. In the example here, we are using it to detect when we have a breakpoint change which may change how a component is rendered if this is not fully possible or inconvenient via CSS `@media` queries. The hash will also be available as the 3rd value returned from the hook for convenience.
103
99
104
100
```js
105
-
importReactfrom'react';
106
101
importuseViewportSizesfrom'use-viewport-sizes';
107
102
108
103
functiongetBreakpointHash({ vpW, vpH }) {
@@ -137,7 +132,7 @@ function MyBreakpointBehaviorComponent() {
137
132
*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*
0 commit comments