@@ -52,9 +52,9 @@ npm install -D use-viewport-sizes
52
52
import useViewportSizes from ' use-viewport-sizes'
53
53
54
54
function MyComponent (props ) {
55
- const [vpWidth , vpHeight ] = useViewportSizes ();
55
+ const [vpWidth , vpHeight ] = useViewportSizes ();
56
56
57
- // ...renderLogic
57
+ // ...renderLogic
58
58
}
59
59
```
60
60
@@ -69,9 +69,9 @@ to what was passed.
69
69
import useViewportSizes from ' use-viewport-sizes' ;
70
70
71
71
function MyComponent (props ) {
72
- const [vpHeight ] = useViewportSizes ({ dimension: ' h' });
72
+ const [vpHeight ] = useViewportSizes ({ dimension: ' h' });
73
73
74
- // ...renderLogic
74
+ // ...renderLogic
75
75
}
76
76
```
77
77
@@ -87,9 +87,10 @@ expensive to re-render during window resize dragging.
87
87
import useViewportSizes from ' use-viewport-sizes' ;
88
88
89
89
function MyExpensivelyRenderedComponent (props ) {
90
- const [vpWidth , vpHeight ] = useViewportSizes ({ throttleTimeout: 1000 }); // 1s throttle
90
+ // throttled by 1s between updates
91
+ const [vpWidth , vpHeight ] = useViewportSizes ({ throttleTimeout: 1000 });
91
92
92
- // ...renderLogic
93
+ // ...renderLogic
93
94
}
94
95
```
95
96
@@ -102,9 +103,10 @@ important to update viewport the entire way that a user is resizing.
102
103
import useViewportSizes from ' use-viewport-sizes' ;
103
104
104
105
function MyExpensivelyRenderedComponent (props ) {
105
- const [vpWidth , vpHeight ] = useViewportSizes ({ debounceTimeout: 1000 }); // 1s debounce
106
+ // debounced by 1s between updates
107
+ const [vpWidth , vpHeight ] = useViewportSizes ({ debounceTimeout: 1000 });
106
108
107
- // ...renderLogic
109
+ // ...renderLogic
108
110
}
109
111
```
110
112
@@ -115,18 +117,18 @@ If passed an `options.hasher` function, this will be used to calculate a hash th
115
117
import useViewportSizes from ' use-viewport-sizes' ;
116
118
117
119
function getBreakpointHash ({ vpW, vpH }) {
118
- if (vpW <= 240 ) { return ' xs' }
119
- if (vpW <= 320 ) { return ' sm' }
120
- else if (vpW <= 640 ) { return ' md' }
121
- else return ' lg' ;
120
+ if (vpW <= 240 ) { return ' xs' }
121
+ if (vpW <= 320 ) { return ' sm' }
122
+ else if (vpW <= 640 ) { return ' md' }
123
+ return ' lg' ;
122
124
}
123
125
124
126
function MyBreakpointBehaviorComponent () {
125
- const [vpW , vpH ] = useViewportSizes ({ hasher: getBreakpointHash });
127
+ const [vpW , vpH ] = useViewportSizes ({ hasher: getBreakpointHash });
126
128
127
- // do-something in render and add new update for vpW,
128
- // vpH in this component's subtree only when a breakpoint
129
- // hash updates
129
+ // do-something in render and add new update for vpW,
130
+ // vpH in this component's subtree only when a breakpoint
131
+ // hash updates
130
132
}
131
133
```
132
134
0 commit comments