Skip to content

Commit 63bc974

Browse files
committed
chore(examples): corrected typos and grammar
1 parent 4bbabca commit 63bc974

File tree

6 files changed

+16
-14
lines changed

6 files changed

+16
-14
lines changed

examples/components/HigherOrderComponent/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
## Higher order component
22

3-
A common way to avoid repetiton and dynamic option setting is to use _HOC_. Since our component reuses instances based on **all** the options, you don't have to worry about bookkeeping of instances. Create as many HOC as you need; they can be as flexible as you need them to be.
3+
A common way to avoid repetition and dynamic option setting is to use a HOC. Since our component is great at reusing instances based on the passed options, you don't have to worry about creating too many of them.
44

5-
The next example illustrates in a simple way how a _HOC_ is used to wrap target elements for occlusion culling:
5+
The next example illustrates in a simple way how a HOC is used to wrap target elements for occlusion culling:
66

77
### withIntersectionObserver.js
88
```jsx

examples/components/ImpressionTracking/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
The requirements for **Viewable Ad Impressions** should generally follow certain guidelines, industry-related standards, some of which are:
44

5-
* __Pixel Requirement__: Greater than or equal to 50% of the pixels in the
5+
* __Viewable pixels__: Greater than or equal to 50% of the pixels in the
66
advertisement were on an in-focus browser tab on the viewable space of
7-
the browser page, and
8-
* __Time Requirement__: The time the pixel requirement is met was greater
7+
the browser page.
8+
* __Viewing time__: The time the pixel requirement is met was greater
99
than or equal to one continuous second, post ad render.
1010

1111
```jsx

examples/components/OnlyOnce/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The option `onlyOnce` applied to the component will only trigger an event once, when the target detects `isIntersecting` is truthy. This is specially useful when you need a disposable observer, and you want to prevent re-rendering the element after that:
1+
The option `onlyOnce` applied to the component will only trigger the event one time: when the target detects `isIntersecting` is truthy. This is specially useful when you need a _disposable observer_, and you need to prevent re-rendering the element later:
22

33
```jsx
44
import React, { Component } from 'react';
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
Usage within a scrollable frame or even iframes should behave as expected. Note that in the example we're using Window as the root, which indicates the observed target triggers changes when intersecting with the viewport, in this case Window.
1+
Example a target within a scrollable frame and iframes to behave correctly. Note that in the example we're using `Window` as the root, which indicates that the observed target triggers changes when intersecting with the viewport, in this case `Window`.
22

3-
However, we can always use a different root. Check out the [rootMargin example](https://researchgate.github.io/react-intersection-observer/?selectedKind=Examples&selectedStory=Margin), where we use a different approach to set the `root` option.
3+
To see another approach to setting the `root`, check out the [rootMargin](https://researchgate.github.io/react-intersection-observer/?selectedKind=Examples&selectedStory=Margin) example.

examples/components/WithRootMargin/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
The option `rootMargin`'s syntax follows that of the `margin` CSS property. The unit(s) however **must** be provided in either `px` or `%` or both. It can also contain _negative values_, which are very useful to shrink the viewport size. Interestingly a percentage value works great to determine if an item is visible on very different screen sizes, e.g.: mobile vs desktop screens.
1+
The option `rootMargin`'s syntax follows that of the `margin` CSS property. The unit(s) however **must** be provided in either `px` or `%` or both. It can also contain _negative values_, which are very useful to shrink the available viewport of the `IntersectionObserver`.
22

3-
Note that in the example below, we conciously show how to set a root to DOM reference using the `disable` option. This option accepts types `Element` and `String`. A more effective way is then to pass a valid `querySelector` string instead.
3+
Interestingly a percentage value works great to determine if an item is visible on very different screen sizes, e.g.: mobile vs desktop screens.
4+
5+
Note that in the example below, we conciously show how to set a root to a DOM element, making use of the `disable` option. Since both `Element` and `String` can be used, a more effective way would be to pass a valid `querySelector` string instead.
46

57
```jsx
68
import React, { Component } from 'react';

examples/components/WithThresholds/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
The option `threshold` is either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1].
1+
The option `threshold` is either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback run every time visibility passes another 25%, you would specify the array `[0, 0.25, 0.5, 0.75, 1]`.
22

3-
The default is 0 (meaning as soon as even one pixel is visible, the callback will be run).
4-
A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.
3+
The default is `0` (meaning as soon as even one pixel is visible, the callback will be run).
4+
A value of `1.0` means that the threshold isn't considered passed until every pixel is visible.
55

6-
Note that when comparing old and new props, our component compares the value of the `treshold` array for convenience, so you don't have to necessarily keep a reference to it. This is specially useful when using within a functional component.
6+
Note that when comparing old and new props, the component will compare the values within the `treshold` array in the same order, so you don't necessarily have to keep a reference to it. This is specially useful when using within a functional component.
77

88
```jsx
99
import React, { Component } from 'react';

0 commit comments

Comments
 (0)