react-lazy-load-image-component 1.5.0 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.babelrc CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
- "presets": ["env", "react"],
3
- "plugins": [
4
- "transform-object-rest-spread"
2
+ "presets": [
3
+ "@babel/preset-env",
4
+ "@babel/preset-react",
5
+ "@babel/preset-typescript"
5
6
  ]
6
- }
7
+ }
package/.eslintrc CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "extends": "eslint:recommended",
3
- "parser": "babel-eslint",
3
+ "parser": "@babel/eslint-parser",
4
4
  "env": {
5
5
  "browser": true,
6
6
  "node": true,
@@ -24,7 +24,7 @@
24
24
  "curly": [1, "multi-line"],
25
25
  "dot-location": [1, "property"],
26
26
  "dot-notation": 1,
27
- "eqeqeq": [1, "smart"],
27
+ "eqeqeq": 1,
28
28
  "guard-for-in": 1,
29
29
  "no-alert": 1,
30
30
  "no-caller": 2,
@@ -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`.