react-atom-trigger 1.0.1-ci.3 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
# react-atom-trigger
|
|
2
2
|
|
|
3
|
-
Simple react-waypoint alternative.
|
|
3
|
+
Simple "[react-waypoint](https://www.npmjs.com/package/react-waypoint)" alternative.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<a href="https://www.npmjs.com/package/react-atom-trigger" target="_blank" style="color: violet !important">NPM: v1.0.1-ci.3</a>
|
|
5
|
+
<a href="https://www.npmjs.com/package/react-atom-trigger" target="_blank" style="color: violet !important">NPM: v1.0.1-ci.5</a>
|
|
8
6
|
## Basic features
|
|
9
7
|
|
|
10
8
|
|
|
@@ -23,11 +21,20 @@ interface IAtomTriggerProps {
|
|
|
23
21
|
}
|
|
24
22
|
```
|
|
25
23
|
|
|
26
|
-
In order to work `AtomTrigger` needs dimensions and
|
|
24
|
+
In order to "work" `AtomTrigger` needs callback, dimensions and simple scroll event data provided.
|
|
25
|
+
|
|
26
|
+
### Callback
|
|
27
|
+
|
|
28
|
+
The function to be executed when AtomTrigger enters or leaves some container.
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
callback: () => void | Promise<void>
|
|
32
|
+
```
|
|
33
|
+
|
|
27
34
|
|
|
28
35
|
### Dimensions
|
|
29
36
|
|
|
30
|
-
Dimensions of the main
|
|
37
|
+
Dimensions of the main "container" (window in many cases).
|
|
31
38
|
|
|
32
39
|
```
|
|
33
40
|
type Dimensions = {
|
|
@@ -36,6 +43,8 @@ type Dimensions = {
|
|
|
36
43
|
};
|
|
37
44
|
```
|
|
38
45
|
|
|
46
|
+
So if you have some logic of calculating container size and container resize handling, just provide needed data to AtomTrigger.
|
|
47
|
+
|
|
39
48
|
### Scroll Event
|
|
40
49
|
|
|
41
50
|
To trigger "events" `AtomTrigger` needs some kind of simple scroll event provided.
|
|
@@ -47,11 +56,16 @@ type ScrollEvent = {
|
|
|
47
56
|
};
|
|
48
57
|
```
|
|
49
58
|
|
|
59
|
+
So, if you already have some scroll event listener, just provide it to AtomTrigger.
|
|
60
|
+
|
|
50
61
|
## Utility hooks
|
|
51
62
|
For someone who wants everything out-of-the-box, `useWindowDimensions`, `useWindowScroll` and `useContainerScroll` hooks are also available for import.
|
|
52
63
|
|
|
53
64
|
## Examples
|
|
54
|
-
It is sometimes better to tweak and see for yourself
|
|
65
|
+
It is sometimes better to tweak and see for yourself: [CodeSandbox examples](https://codesandbox.io/dashboard/all/react-atom-trigger).
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
[**More detailed react-atom-trigger overview**](https://visiofutura.com/solving-scroll-into-view-problem-in-react-my-way-a8056a1bdc11) is available as Medium story.
|
|
55
69
|
|
|
56
70
|
|
|
57
71
|
|