Skip to content

Commit ce2b31e

Browse files
committed
Update README
1 parent ba0f3a5 commit ce2b31e

File tree

2 files changed

+27
-11
lines changed

2 files changed

+27
-11
lines changed

README.md

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,38 @@
44

55
<hr />
66

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.
88

99
## Installation
1010

11+
To install, you can use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/):
12+
1113
```bash
12-
npm i react-is-in-viewport --save
14+
$ npm install react-is-in-viewport
15+
$ yarn add react-is-in-viewport
1316
```
1417

15-
or
1618

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
2030

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`
2239

2340
```tsx
2441
import * as ReactDOM from 'react-dom';
@@ -62,5 +79,4 @@ class App extends React.Component<{}> {
6279
}
6380

6481
ReactDOM.render(<App />, document.getElementById('root'));
65-
66-
```
82+
```

tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"module": "commonjs",
1414
"declaration": true,
1515
"outDir": "./dist",
16-
"jsx":"react",
17-
"moduleResolution":"node",
16+
"jsx": "react",
17+
"moduleResolution": "node",
1818
"allowSyntheticDefaultImports": true,
1919
"noImplicitAny": false,
2020
"noImplicitThis": true,

0 commit comments

Comments
 (0)