Skip to content

Commit e0425a6

Browse files
committed
Añadiendo ejemplo
0 parents  commit e0425a6

17 files changed

+27318
-0
lines changed

.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

README.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<p align="center">
2+
<img src="miniatura.png" alt="Youtube, Nelsonher, horchatajs"/>
3+
</p>
4+
5+
<h3>
6+
<p align="center">Aprende como implementar Lazy Loading a tus imagenes con Intersection Observer API y React JS</p>
7+
</h3>
8+
9+
#### Hook useInfiniteScroll
10+
11+
```javascript
12+
import { useRef, useEffect } from "react";
13+
14+
export const useInfiniteScroll = ({ element, fetch }) => {
15+
const loader = useRef(fetch);
16+
17+
const observer = useRef(
18+
new IntersectionObserver(
19+
(entries) => {
20+
const first = entries[0];
21+
if (first.isIntersecting) {
22+
loader.current();
23+
}
24+
},
25+
{ threshold: 0.5 }
26+
)
27+
);
28+
29+
useEffect(() => {
30+
loader.current = fetch;
31+
}, [fetch]);
32+
33+
useEffect(() => {
34+
const currentElement = element;
35+
const currentObserver = observer.current;
36+
37+
if (currentElement) {
38+
currentObserver.observe(currentElement);
39+
}
40+
return () => {
41+
if (currentElement) {
42+
currentObserver.unobserve(currentElement);
43+
}
44+
};
45+
}, [element]);
46+
};
47+
```

miniatura.png

535 KB
Loading

0 commit comments

Comments
 (0)