@@ -16,7 +16,7 @@ By default the library ships with Typescript definitions, so there is no need to
16
16
17
17
## Usage
18
18
19
- ### ViewportProvider/ connectViewportScroll
19
+ ### ViewportProvider/ connectViewport/ ObserveViewport
20
20
21
21
The ViewportProvider will delegate global viewport information to a connected component.
22
22
@@ -62,10 +62,60 @@ render(
62
62
);
63
63
```
64
64
65
+ In some situations more control is required to do perform heavy tasks. Therefore the ` ObserveViewport ` component allows to update without rendering.
66
+
67
+ ``` javascript
68
+ import * as React from ' react' ;
69
+ import {
70
+ ViewportProvider ,
71
+ ObserveViewport ,
72
+ IScroll ,
73
+ IDimensions ,
74
+ } from ' react-viewport-uitls' ;
75
+
76
+ interface IViewport {
77
+ scroll: IScroll,
78
+ dimensions: IDimensions,
79
+ }
80
+
81
+ const handleUpdate = ({ scroll, dimensions }: IViewport) {
82
+ console .log (scroll, dimensions);
83
+ }
84
+
85
+ render (
86
+ < ViewportProvider>
87
+ < div>
88
+ < ObserveViewport onUpdate= {handleUpdate} / >
89
+ < / div>
90
+ < / ViewportProvider> ,
91
+ document .querySelector (' main' )
92
+ );
93
+ ```
94
+
95
+ #### Omit events
96
+
97
+ In case only certain updates are required ` connectViewport ` allows an ` omit ` option to skip updates to ` scroll ` and ` dimensions ` events. If both strings are included within the ` omit ` array, no events will get triggered at all.
98
+
99
+ ``` javascript
100
+ const ConnectedComponent = connectViewport ({ omit: [' scroll' , ' dimensions' ]})(Component);
101
+ ```
102
+
103
+ The same works for ` ObserveViewport ` by using the ` disableScrollUpdates ` and ` disableDimensionsUpdates ` property.
104
+
105
+ ``` javascript
106
+ < ObserveViewport
107
+ disableScrollUpdates
108
+ disableDimensionsUpdates
109
+ onUpdate= {handleUpdate}
110
+ / >
111
+ ```
112
+
65
113
### ObserveBoundingClientRect
66
114
67
115
Observes for changes to the bounding client rect of a given reference.
68
116
117
+ ** !!! Be careful with this component. It can cause really bad performance if overused !!!**
118
+
69
119
``` javascript
70
120
import * as React from ' react' ;
71
121
import { ObserveBoundingClientRect , IRect } from ' react-viewport-uitls' ;
0 commit comments