реклама
разместить

React Custom Hook: useOnScreen

React Custom Hook: useOnScreen
React Custom Hook: useOnScreen

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useOnScreen" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

import { useEffect, useState } from "react" export default function useOnScreen(ref, rootMargin = "0px") { const [isVisible, setIsVisible] = useState(false) useEffect(() => { if (ref.current == null) return const observer = new IntersectionObserver( ([entry]) => setIsVisible(entry.isIntersecting), { rootMargin } ) observer.observe(ref.current) return () => { if (ref.current == null) return observer.unobserve(ref.current) } }, [ref.current, rootMargin]) return isVisible }

The useOnScreen hook leverages the power of the Intersection Observer API, making it efficient and reliable. By simply providing a ref to the element you want to monitor, useOnScreen will notify you when it enters or exits the viewport.

One of the key advantages of useOnScreen is its simplicity. With just a few lines of code, you can detect if an element is visible and respond accordingly. This can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls.

To use this hook, first import it into your component file. Then, create a ref using the useRef hook to target the desired element. Pass the ref as the first argument to the useOnScreen hook, and you're all set! You can also provide an optional rootMargin value to adjust the visible threshold.

import { useRef } from "react" import useOnScreen from "./useOnScreen" export default function OnScreenComponentComponent() { const headerTwoRef = useRef() const visible = useOnScreen(headerTwoRef, "-100px") return ( <div> <h1>Header</h1> <div> ... </div> <h1 ref={headerTwoRef}>Header 2 {visible && "(Visible)"}</h1> <div> ... </div> </div> ) }

In our example code, the OnScreenComponentComponent demonstrates how to use the useOnScreen hook. By attaching the ref to the second header element, we can display a "(Visible)" text when it enters the viewport. Feel free to customize the logic within your component to suit your specific needs.

11
реклама
разместить
Начать дискуссию
Купил мопед и сдаю его в Таиланде, а сам живу в России. И вот что из этого вышло…
***
1111
22
11
11
реклама
разместить
«Мы ребята не зазнайки…», или 9 честных ответов на вопросы о работе пресейл-менеджера

С какими болями приходят в агентство клиенты? Как долго готовится коммерческое предложение? Как строятся прогнозы по SEO? Правда ли, что с маленьким бюджетом можно не рассчитывать на индивидуальный подход? Отвечает руководитель отдела пресейла Kokoc.com Марина Архипова.

«Мы ребята не зазнайки…», или 9 честных ответов на вопросы о работе пресейл-менеджера
66
Продолжение эйфории. Вот и брокеры начали переобуваться
Продолжение эйфории. Вот и брокеры начали переобуваться
Скандал вокруг цензуры Grok 3: как Илон Маск пытается вколотить в свое детище «любовь к бате»

Самое интересное, что прямо сейчас присходит в AI-отрасли – это гомерически смешная ситуация с новой нейросетевой моделью Grok 3. «Самый умный интеллект в мире», как выяснилось, не очень хорошо относится к своему создателю – и у Маска, видимо, от этого дичайше подгорает. В этой статье мы разберем на скриншотах неуклюжие попытки xAI пофиксить ситуац…

Твое лицо, когда у любимого AI-чада начинается переходный период, и оно объявляет бунт против своих родителей
33
Сооснователь «Моторики» создал компанию по разработке биореактора для исследований на Луне

Он вложит в разработки от 100 млн рублей и надеется создать реактор в течение трёх-пяти лет.

33
11
11
Биткоин - конец бычьего рынка! Что дальше?
Биткоин - конец бычьего рынка! Что дальше?
55
Как крупнейший частный медицинский центр Владимирской области «Норма» внедрил MANGO OFFICE и создал единое пространство для коммуникаций с клиентами

Кейс внедрения продуктов MANGO OFFICE в сеть клиник «Норма»

Как крупнейший частный медицинский центр Владимирской области «Норма» внедрил MANGO OFFICE и создал единое пространство для коммуникаций с клиентами
Work Management бесполезен, если не связать проекты, процессы, обучение. Вы это серьезно?...

Задачи по проектам валятся как снег на голову... Сроки горят, и команде приходится работать аврально, чтобы успеть сдать всё в срок. Такие ситуации возникают сплошь и рядом, но только не у разработчика мобильных приложений для стартапов. Не так давно они внедрили методику Work Management.

Work Management бесполезен, если не связать проекты, процессы, обучение. Вы это серьезно?...
66
33
11
[]