Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-lazy-load

Package Overview
Dependencies
Maintainers
2
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lazy-load - npm Package Compare versions

Comparing version 3.1.14 to 4.0.0

dist/index.d.ts
dist/LazyLoad.d.ts
dist/LazyLoad.umd.cjs

71

package.json
{
"name": "react-lazy-load",
"version": "3.1.14",
"version": "4.0.0",
"description": "Simple lazy loading component built with react",
"main": "./lib/LazyLoad.js",
"type": "module",
"main": "./dist/LazyLoad.umd.cjs",
"module": "./dist/LazyLoad.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/LazyLoad.js",
"require": "./dist/LazyLoad.umd.cjs"
}
},
"scripts": {
"build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
"build:lib": "babel src --out-dir lib",
"build:umd": "webpack src/LazyLoad.jsx dist/LazyLoad.js --config webpack.config.development.js",
"build:umd:min": "webpack src/LazyLoad.jsx dist/LazyLoad.min.js --config webpack.config.production.js",
"build": "npx vite build",
"clean": "rimraf lib dist",
"lint": "eslint src/LazyLoad.jsx",
"lint": "eslint src/LazyLoad.tsx",
"prepublish": "npm run clean && npm run build",

@@ -37,37 +43,28 @@ "test": "jest"

"devDependencies": {
"babel-cli": "^6.3.17",
"babel-core": "^6.2.1",
"babel-eslint": "^4.1.5",
"babel-jest": "^12.0.2",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"eslint": "^1.8.0",
"eslint-config-airbnb": "^0.1.0",
"eslint-plugin-react": "^3.7.1",
"jest-cli": "^12.0.2",
"react": "^0.14.8",
"react-addons-test-utils": "^0.14.8",
"react-dom": "^0.14.8",
"rimraf": "^2.4.4",
"webpack": "^1.12.2"
"@types/lodash": "^4.14.184",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.34.0",
"@typescript-eslint/parser": "^5.34.0",
"eslint": "^8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-import-resolver-typescript": "^3.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^3.0.2"
},
"dependencies": {
"eventlistener": "0.0.1",
"lodash.debounce": "^4.0.0",
"lodash.throttle": "^4.0.0",
"prop-types": "^15.5.8"
"@vitejs/plugin-react": "^2.0.1",
"typescript": "^4.7.4",
"vite": "^3.0.9",
"vite-plugin-dts": "^1.4.1"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0",
"react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"
},
"jest": {
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
]
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
}
}

136

README.md
React Lazy Load Component
=========================
React Lazy Load is easy to use React component which helps you defer loading content in predictable way. It's fast, works in IE8+, 6KB minified and uses debounce function by default. You can also use component inside scrolling container, such as div with scrollbar. It will be found automatically. Check out an example.
React Lazy Load is an easy-to-use React component which helps you defer loading content in predictable way. It's fast, You can also use component inside scrolling container, such as div with scrollbar. It will be found automatically. Check out an example.
[![build status](https://img.shields.io/travis/loktar00/react-lazy-load.svg?style=flat-square)](https://travis-ci.org/loktar00/react-lazy-load)
[![dependency status](https://david-dm.org/loktar00/react-lazy-load.svg?style=flat-square)](https://david-dm.org/loktar00/react-lazy-load)
[![npm downloads](https://img.shields.io/npm/dm/react-lazy-load.svg?style=flat-square)](https://www.npmjs.com/package/react-lazy-load)
## 4.0 Update
Converted to work with React 18, and updated to use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
### Breaking changes
* No more debunce, or throttle options as they aren't needed
* Removed individual offset props, offset can be used just like css margin, eg. `offset={'0px 10px 200px 0px'}` or `offset={100}`
### Improvements
Since we're now using the intersection observer we don't need to watch a user scroll, more importantly we don't have to manually calculate if a user can see the element or not.
Also took this oppourtunity to convert over to TS.
## Installation
React Lazy Load requires **React 0.14 or later.**
React Lazy Load requires **React 17 or later.**
```
npm install --save react-lazy-load
npm i -S react-lazy-load
```
## Examples
* [Basic](https://github.com/loktar00/react-lazy-load/tree/master/examples/basic)
* [In Repo](https://github.com/loktar00/react-lazy-load/tree/master/examples/basic)
## Usage
## Examples
### Basic Usage
```jsx

@@ -28,27 +39,46 @@ import React from 'react';

<div>
Scroll to load images.
<div className="filler" />
<LazyLoad height={762} offsetVertical={300}>
<LazyLoad height={762}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={683} offsetTop={200}>
<img src='http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg' />
</div>
)
```
### Loading the image 300px prior to scroll
```jsx
const MyComponent = () => (
<div>
<LazyLoad height={762} offset={300}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={480} offsetHorizontal={50}>
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' />
</div>
)
```
### Loading image only when 95% of it is in the viewport. **note** a width must be specified.
```jsx
const MyComponent = () => (
<div>
<LazyLoad height={762} width={400} threshold={0.95}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad
height={720}
onContentVisible={() => console.log('look ma I have been lazyloaded!')}
>
<img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' />
</div>
)
```
### Performing a side effect once your image is loaded
```jsx
const MyComponent = () => (
<div>
<LazyLoad height={762} width={400} threshold={0.95} onContentVisible={() => {console.log('loaded!')}}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
</div>
);
)
```
## Props

@@ -59,46 +89,9 @@

Aliases: `threshold`
The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`.
#### offsetVertical
Type: `Number|String` Default: `offset`'s value
#### threshold
Type: `Number` Default: `0`
The `offsetVertical` option allows you to specify how far above and below the viewport you want to _begin_ displaying your content.
This `threshold` option allows you to specify how much of the element must be shown on the screen prior to loading. This requires a _width_ and _height_ to be set on the `<LazyLoad>` component in order for the browser to calcualte the viewable area.
#### offsetHorizontal
Type: `Number|String` Default: `offset`'s value
The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want to _begin_ displaying your contet.
#### offsetTop
Type: `Number|String` Default: `offsetVertical`'s value
The `offsetTop` option allows you to specify how far above the viewport you want to _begin_ displaying your content.
#### offsetBottom
Type: `Number|String` Default: `offsetVertical`'s value
The `offsetBottom` option allows you to specify how far below the viewport you want to _begin_ displaying your content.
#### offsetLeft
Type: `Number|String` Default: `offsetVertical`'s value
The `offsetLeft` option allows you to specify how far to left of the viewport you want to _begin_ displaying your content.
#### offsetRight
Type: `Number|String` Default: `offsetVertical`'s value
The `offsetRight` option allows you to specify how far to the right of the viewport you want to _begin_ displaying your content.
#### throttle
Type: `Number|String` Default: `250`
The throttle is managed by an internal function that prevents performance issues from continuous firing of `scroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds.
#### debounce
Type: `Boolean` Default: `true`
By default the throttling function is actually a [debounce](https://lodash.com/docs#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the loadable content every `throttle` milliseconds, set `debounce` to `false`.
#### height

@@ -118,1 +111,18 @@ Type: `String|Number`

A callback function to execute when the content appears on the screen.
## Building LazyLoad
```
npm run build
```
## Running examples
```
cd examples/basic
npm run dev
```
dist/LazyLoad.min.js
lib/LazyLoad.js
lib/utils/__mocks__/getElementPosition.js
lib/utils/getElementPosition.js
lib/utils/inViewport.js
lib/utils/parentScroll.js
dist/LazyLoad.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc