Skip to content

Commit 51d0663

Browse files
committed
docs(*): update readme
1 parent 9c85bd8 commit 51d0663

File tree

1 file changed

+51
-1
lines changed

1 file changed

+51
-1
lines changed

README.md

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ By default the library ships with Typescript definitions, so there is no need to
1616

1717
## Usage
1818

19-
### ViewportProvider/ connectViewportScroll
19+
### ViewportProvider/ connectViewport/ ObserveViewport
2020

2121
The ViewportProvider will delegate global viewport information to a connected component.
2222

@@ -62,10 +62,60 @@ render(
6262
);
6363
```
6464

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+
65113
### ObserveBoundingClientRect
66114

67115
Observes for changes to the bounding client rect of a given reference.
68116

117+
**!!! Be careful with this component. It can cause really bad performance if overused !!!**
118+
69119
``` javascript
70120
import * as React from 'react';
71121
import { ObserveBoundingClientRect, IRect } from 'react-viewport-uitls';

0 commit comments

Comments
 (0)