Gustavo Fabro gustavofabro

🏠

Working from home

Front-end developer

gustavofabro / intersection-observer-ex3.tsx

Created October 23, 2021 11:31

Uso da flag isIntersecting

	if (!entries[0].isIntersecting) {
	return;
	}

	// Função responsável por carregar mais itens

gustavofabro / intersection-observer-ex4.tsx

Last active October 26, 2021 12:15

Uso da flag isLoading

	function App() {
	const [isLoading, setIsLoading] = useState(false);

	// Restante do código

	useEffect(() => {
	const observer = new IntersectionObserver(
	(entries: IntersectionObserverEntry[]) => {
	if (!entries[0].isIntersecting \|\| isLoading) {
	return;

gustavofabro / intersection-observer-ex2.tsx

Last active October 23, 2021 11:19

useEffect IntersectionObserver

	useEffect(() => {
	const observer = new IntersectionObserver(
	(entries: IntersectionObserverEntry[]) => {
	// Função responsável por carregar mais itens
	},
	{
	root: null,
	rootMargin: '0px',
	threshold: 0
	});

gustavofabro / intersection-observer-ex1.tsx

Last active October 17, 2021 17:21

Estrutura HTML

	function App() {
	const loadingElementRef = useRef<HTMLDivElement>(null);

	// Restante do código

	return (
	<main className="app">
	<div className="list">
	{data.map(item => (
	<div key={item.id} className="item">{`Item ${item.id + 1}`}</div>