Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-in-viewport
Advanced tools
react-in-viewport - npm Package Compare versions
Comparing version 1.0.0-alpha.14 to 1.0.0-alpha.15
| { | ||
| "name": "react-in-viewport", | ||
| "version": "1.0.0-alpha.14", | ||
| "version": "1.0.0-alpha.15", | ||
| "description": "Track React component in viewport using Intersection Observer API", | ||
@@ -50,3 +50,3 @@ "author": "Roderick Hsiao <roderickhsiao@gmail.com>", | ||
| "enzyme": "^3.0.0", | ||
| "enzyme-adapter-react-16": "^1.7.1", | ||
| "enzyme-adapter-react-16": "^1.15.5", | ||
| "eslint": "^6.8.0", | ||
@@ -73,4 +73,4 @@ "eslint-config-airbnb": "^18.0.1", | ||
| "peerDependencies": { | ||
| "react": "^16.8.3", | ||
| "react-dom": "^16.8.3" | ||
| "react": "^16.8.3 || ^17.0.0", | ||
| "react-dom": "^16.8.3 || ^17.0.0" | ||
| }, | ||
@@ -77,0 +77,0 @@ "dependencies": { |
@@ -10,4 +10,10 @@ <p align="center"> | ||
| Library to detect if the component is in viewport using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | ||
| Library to detect whether or not a component is in the viewport, using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | ||
| ```npm install --save react-in-viewport``` | ||
| ```yarn add react-in-viewport``` | ||
| ## Examples | ||
| [Demo](https://roderickhsiao.github.io/react-in-viewport/) | ||
@@ -17,7 +23,7 @@ | ||
| A common use case is to load image when component is in viewport ([lazy load](https://medium.com/@roderickhsiao/performance-101-i-know-how-to-load-images-a262d556250f)). | ||
| A common use case is to load an image when a component is in the viewport ([lazy load](https://medium.com/@roderickhsiao/performance-101-i-know-how-to-load-images-a262d556250f)). | ||
| Traditionally we will need to keep monitoring scroll position and calculating viewport size which could be a big scroll performance bottleneck. | ||
| We have traditionally needed to monitor scroll position and calculate the viewport size, which can be a scroll performance bottleneck. | ||
| Modern browser now provides a new API [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) which can make the implementation much easier and performant. | ||
| Modern browsers now provide a new API--[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)--which can make implementating this effort much easier and performant. | ||
@@ -27,3 +33,3 @@ | ||
| For browser not supporting the API, you will load a [polyfill](https://www.npmjs.com/package/intersection-observer). | ||
| For browsers not supporting the API, you will need to load a [polyfill](https://www.npmjs.com/package/intersection-observer). | ||
| [Browser support table](https://caniuse.com/#feat=intersectionobserver) | ||
@@ -37,19 +43,17 @@ | ||
| The core logic written in React Hook. We provides two interface, you could use `handleViewport` which is a higher order component (if your component is a class based component) or directly use hooks (functional component). | ||
| The core logic is written using React Hooks. We provide two interfaces: you can use `handleViewport`, a higher order component (HOC) for class based components, or use hooks directly, for functional components. | ||
| The higher order component (HOC) as a wrapper and attach intersection observer to your target component. The HOC will then pass down extra props indicating viewport information along with executing callback function when component entering and leaving viewport. | ||
| The HOC acts as a wrapper and attaches the intersection observer to your target component. The HOC will then pass down extra props, indicating viewport information and executing a callback function when the component enters and leaves the viewport. | ||
| ## Usages | ||
| Wrap your component with handleViewport HOC, you will receive `inViewport` props indicating the component is in viewport or not. | ||
| When wrapping your component with `handleViewport` HOC, you will receive `inViewport` props indicating whether the component is in the viewport or not. | ||
| `handleViewport` HOC accepts three params | ||
| `handleViewport` HOC accepts three params: `handleViewport(Component, Options, Config)` | ||
| `handleViewport(Component, Options, Config)` | ||
| | Params | Type | Description | | ||
| |-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------| | ||
| | Component | React Element | Callback function for component enters viewport | | ||
| | Options | Object | Option you want to pass to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | | | ||
| | Config | Object | Configs for HOC, see below | | ||
| | Component | React Element | Callback function for when the component enters the viewport | | ||
| | Options | Object | Options you want to pass to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | | | ||
| | Config | Object | Configs for HOC (see below) | | ||
@@ -60,26 +64,26 @@ ### Supported config | ||
| |-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------| | ||
| | disconnectOnLeave | boolean | fasle | disconnect intersection observer after leave | | ||
| | disconnectOnLeave | boolean | fasle | Disconnect intersection observer after leave | | ||
| ### Props to the HOC component | ||
| ### HOC Component Props | ||
| | Props | Type | Default | Description | | ||
| |-----------------|----------|---------|-------------------------------------------------| | ||
| | onEnterViewport | function | | Callback function for component enters viewport | | ||
| | onLeaveViewport | function | | Callback function for component leaves viewport | | ||
| | onEnterViewport | function | | Callback function for when the component enters the viewport | | ||
| | onLeaveViewport | function | | Callback function for when the component leaves the viewport | | ||
| The HOC preserve `onEnterViewport` and `onLeaveViewport` props as a callback | ||
| The HOC preserves `onEnterViewport` and `onLeaveViewport` props as a callback | ||
| ### Props pass down by HOC to your component | ||
| ### Props passed down by HOC to your component | ||
| | Props | Type | Default | Description | | ||
| |------------|-----------|---------|-----------------------------------------------------------------------------------| | ||
| | inViewport | boolean | false | Is your component in viewport | | ||
| | forwardedRef | React ref | | If you are using functional component, assign this props as ref on your component | | ||
| | enterCount | number | | Amount of time your component enters viewport | | ||
| | leaveCount | number | | Amount of time your component leaves viewport | | ||
| | inViewport | boolean | false | Whether your component is in the viewport | | ||
| | forwardedRef | React ref | | If you are using a functional component, assign this prop as a ref on your component | | ||
| | enterCount | number | | Numbers of times your component has entered the viewport | | ||
| | leaveCount | number | | Number of times your component has left the viewport | | ||
| _NOTE_: Stateless: Need to add `ref={this.props.forwardedRef}` on your component | ||
| _NOTE_: Stateless: Need to add `ref={this.props.forwardedRef}` to your component | ||
| #### Example of functional component | ||
| #### Example of a functional component | ||
@@ -115,4 +119,4 @@ ```javascript | ||
| - If you need to know how many times the component has entered the viewport use the prop `enterCount`. | ||
| - If you need to know how many times the component has left the viewport use the prop `leaveCount`. | ||
| - If you need to know how many times the component has entered the viewport, use the prop `enterCount`. | ||
| - If you need to know how many times the component has left the viewport, use the prop `leaveCount`. | ||
@@ -156,3 +160,3 @@ ```javascript | ||
| This library is using `ReactDOM.findDOMNode` to access DOM from React element. This method is deprecated in `StrictMode`, we will update the code and release a major version when React 17 is out. | ||
| This library is using `ReactDOM.findDOMNode` to access the DOM from a React element. This method is deprecated in `StrictMode`. We will update the package and release a major version when React 17 is out. | ||
@@ -159,0 +163,0 @@ ## Who is using this component |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.29%
79756
- Number of lines in readme file
- increased by2.58%
159
No dependency changes