react-lazy-load-image-component 1.5.0 → 1.5.1
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/codeql-analysis.yml +71 -0
- package/README.md +12 -0
- package/build/index.js +0 -1
- package/package.json +3 -3
@@ -0,0 +1,71 @@
|
|
1
|
+
# For most projects, this workflow file will not need changing; you simply need
|
2
|
+
# to commit it to your repository.
|
3
|
+
#
|
4
|
+
# You may wish to alter this file to override the set of languages analyzed,
|
5
|
+
# or to provide custom queries or build logic.
|
6
|
+
name: "CodeQL"
|
7
|
+
|
8
|
+
on:
|
9
|
+
push:
|
10
|
+
branches: [master]
|
11
|
+
pull_request:
|
12
|
+
# The branches below must be a subset of the branches above
|
13
|
+
branches: [master]
|
14
|
+
schedule:
|
15
|
+
- cron: '0 14 * * 1'
|
16
|
+
|
17
|
+
jobs:
|
18
|
+
analyze:
|
19
|
+
name: Analyze
|
20
|
+
runs-on: ubuntu-latest
|
21
|
+
|
22
|
+
strategy:
|
23
|
+
fail-fast: false
|
24
|
+
matrix:
|
25
|
+
# Override automatic language detection by changing the below list
|
26
|
+
# Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
|
27
|
+
language: ['javascript']
|
28
|
+
# Learn more...
|
29
|
+
# https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
|
30
|
+
|
31
|
+
steps:
|
32
|
+
- name: Checkout repository
|
33
|
+
uses: actions/checkout@v2
|
34
|
+
with:
|
35
|
+
# We must fetch at least the immediate parents so that if this is
|
36
|
+
# a pull request then we can checkout the head.
|
37
|
+
fetch-depth: 2
|
38
|
+
|
39
|
+
# If this run was triggered by a pull request event, then checkout
|
40
|
+
# the head of the pull request instead of the merge commit.
|
41
|
+
- run: git checkout HEAD^2
|
42
|
+
if: ${{ github.event_name == 'pull_request' }}
|
43
|
+
|
44
|
+
# Initializes the CodeQL tools for scanning.
|
45
|
+
- name: Initialize CodeQL
|
46
|
+
uses: github/codeql-action/init@v1
|
47
|
+
with:
|
48
|
+
languages: ${{ matrix.language }}
|
49
|
+
# If you wish to specify custom queries, you can do so here or in a config file.
|
50
|
+
# By default, queries listed here will override any specified in a config file.
|
51
|
+
# Prefix the list here with "+" to use these queries and those in the config file.
|
52
|
+
# queries: ./path/to/local/query, your-org/your-repo/queries@main
|
53
|
+
|
54
|
+
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
55
|
+
# If this step fails, then you should remove it and run the build manually (see below)
|
56
|
+
- name: Autobuild
|
57
|
+
uses: github/codeql-action/autobuild@v1
|
58
|
+
|
59
|
+
# ℹ️ Command-line programs to run using the OS shell.
|
60
|
+
# 📚 https://git.io/JvXDl
|
61
|
+
|
62
|
+
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
|
63
|
+
# and modify them (or add more) to build your code if your project
|
64
|
+
# uses a compiled language
|
65
|
+
|
66
|
+
#- run: |
|
67
|
+
# make bootstrap
|
68
|
+
# make release
|
69
|
+
|
70
|
+
- name: Perform CodeQL Analysis
|
71
|
+
uses: github/codeql-action/analyze@v1
|
package/README.md
CHANGED
@@ -252,6 +252,18 @@ export default trackWindowScroll(Gallery);
|
|
252
252
|
|
253
253
|
## Common errors
|
254
254
|
|
255
|
+
### All images are being loaded at once
|
256
|
+
|
257
|
+
This package loads images when they are visible in the viewport. Before an image is loaded, it occupies 0x0 pixels, so if you have a gallery of images, that means all images will be in the visible part of the page until the first ones load and start pushing down the other ones.
|
258
|
+
|
259
|
+
To fix this issue, make sure you either set a `height` and `width` props or a `placeholder` to your images.
|
260
|
+
|
261
|
+
### Effects are not working
|
262
|
+
|
263
|
+
You need to import the effect CSS as shown in the [Using effects](#using-effects) code example.
|
264
|
+
|
265
|
+
Also, notice browsers might behave differently while images are loading. Some times, while an image is not completely loaded yet, the browser will show a white background behind it, making the effect not to be visible. This is an issue with browsers and not something that can be fixed in this package.
|
266
|
+
|
255
267
|
### Warning: setState(...): Can only update a mounted or mounting component.
|
256
268
|
|
257
269
|
That warning might appear if there are two components using `trackWindowScroll` at the same time. Notice it's not possible to have a LazyLoadImage/LazyLoadComponent inside another LazyLoadComponent for now. Also, make sure you are passing down `scrollPosition` to all components wrapped inside `trackWindowScroll`.
|
package/build/index.js
CHANGED
package/package.json
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-lazy-load-image-component",
|
3
|
-
"version": "1.5.
|
3
|
+
"version": "1.5.1",
|
4
4
|
"description": " React Component to lazy load images using a HOC to track window scroll position. ",
|
5
5
|
"main": "build/index.js",
|
6
6
|
"peerDependencies": {
|
7
|
-
"react": "^15.x.x || ^16.x.x",
|
8
|
-
"react-dom": "^15.x.x || ^16.x.x"
|
7
|
+
"react": "^15.x.x || ^16.x.x || ^17.x.x",
|
8
|
+
"react-dom": "^15.x.x || ^16.x.x || ^17.x.x"
|
9
9
|
},
|
10
10
|
"dependencies": {
|
11
11
|
"lodash.debounce": "^4.0.8",
|