Skip to content

Commit f0b436e

Browse files
committed
README: use 2sp on examples
1 parent 78bed9d commit f0b436e

File tree

1 file changed

+18
-16
lines changed

1 file changed

+18
-16
lines changed

README.md

+18-16
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ npm install -D use-viewport-sizes
5252
import useViewportSizes from 'use-viewport-sizes'
5353

5454
function MyComponent(props) {
55-
const [vpWidth, vpHeight] = useViewportSizes();
55+
const [vpWidth, vpHeight] = useViewportSizes();
5656

57-
// ...renderLogic
57+
// ...renderLogic
5858
}
5959
```
6060

@@ -69,9 +69,9 @@ to what was passed.
6969
import useViewportSizes from 'use-viewport-sizes';
7070

7171
function MyComponent(props) {
72-
const [vpHeight] = useViewportSizes({ dimension: 'h' });
72+
const [vpHeight] = useViewportSizes({ dimension: 'h' });
7373

74-
// ...renderLogic
74+
// ...renderLogic
7575
}
7676
```
7777

@@ -87,9 +87,10 @@ expensive to re-render during window resize dragging.
8787
import useViewportSizes from 'use-viewport-sizes';
8888

8989
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 });
9192

92-
// ...renderLogic
93+
// ...renderLogic
9394
}
9495
```
9596

@@ -102,9 +103,10 @@ important to update viewport the entire way that a user is resizing.
102103
import useViewportSizes from 'use-viewport-sizes';
103104

104105
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 });
106108

107-
// ...renderLogic
109+
// ...renderLogic
108110
}
109111
```
110112

@@ -115,18 +117,18 @@ If passed an `options.hasher` function, this will be used to calculate a hash th
115117
import useViewportSizes from 'use-viewport-sizes';
116118

117119
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';
122124
}
123125

124126
function MyBreakpointBehaviorComponent() {
125-
const [vpW, vpH] = useViewportSizes({ hasher: getBreakpointHash });
127+
const [vpW, vpH] = useViewportSizes({ hasher: getBreakpointHash });
126128

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
130132
}
131133
```
132134

0 commit comments

Comments
 (0)