File tree Expand file tree Collapse file tree 2 files changed +27
-11
lines changed Expand file tree Collapse file tree 2 files changed +27
-11
lines changed Original file line number Diff line number Diff line change 4
4
5
5
<hr />
6
6
7
- Component allows to track the React components in the viewport
7
+ Component allows to track the other React components whether or not it is in the Viewport.
8
8
9
9
## Installation
10
10
11
+ To install, you can use [ npm] ( https://www.npmjs.com/ ) or [ yarn] ( https://yarnpkg.com/lang/en/ ) :
12
+
11
13
``` bash
12
- npm i react-is-in-viewport --save
14
+ $ npm install react-is-in-viewport
15
+ $ yarn add react-is-in-viewport
13
16
```
14
17
15
- or
16
18
17
- ``` bash
18
- yarn add react-is-in-viewport
19
- ```
19
+ ## Props
20
+
21
+ | Name| Type | Default value | Description
22
+ | --| --| --| --|
23
+ | children | React Node or string | | React component or string that display in UI |
24
+ | delay | number | 100 | Delay time to execute scrolling event callback |
25
+ | type | 'fit' or 'overlap' | fit | Mode to track component the component fits in the viewport or overlaps with viewport |
26
+ | id | string | | Identifier of Viewport |
27
+ | className | string | | Custom CSS class |
28
+
29
+ ## API
20
30
21
- ## Usage
31
+ | Name| Type | Parameter | Description
32
+ | --| --| --| --|
33
+ | onEnter | void | enterCount | When component is in the Viewport, the ` enterCount ` increase 1 |
34
+ | onLeave | void | leaveCount | When component is not in the Viewport, the ` leaveCount ` increase 1 |
35
+
36
+ ## Example
37
+
38
+ Here is a simple example of ` react-is-in-viewport `
22
39
23
40
``` tsx
24
41
import * as ReactDOM from ' react-dom' ;
@@ -62,5 +79,4 @@ class App extends React.Component<{}> {
62
79
}
63
80
64
81
ReactDOM .render (<App />, document .getElementById (' root' ));
65
-
66
- ```
82
+ ```
Original file line number Diff line number Diff line change 13
13
"module" : " commonjs" ,
14
14
"declaration" : true ,
15
15
"outDir" : " ./dist" ,
16
- "jsx" :" react" ,
17
- "moduleResolution" :" node" ,
16
+ "jsx" : " react" ,
17
+ "moduleResolution" : " node" ,
18
18
"allowSyntheticDefaultImports" : true ,
19
19
"noImplicitAny" : false ,
20
20
"noImplicitThis" : true ,
You can’t perform that action at this time.
0 commit comments