React Custom Hook: useLongPress

React Custom Hook: useLongPress
React Custom Hook: useLongPress

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 "useLongPress" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

import useEventListener from "../useEventListener/useEventListener" import useTimeout from "../useTimeout/useTimeout" import useEffectOnce from "../useEffectOnce/useEffectOnce" export default function useLongPress(ref, cb, { delay = 250 } = {}) { const { reset, clear } = useTimeout(cb, delay) useEffectOnce(clear) useEventListener("mousedown", reset, ref.current) useEventListener("touchstart", reset, ref.current) useEventListener("mouseup", clear, ref.current) useEventListener("mouseleave", clear, ref.current) useEventListener("touchend", clear, ref.current) }

One of the key advantages of useLongPress is its simplicity. By utilizing this hook, developers can easily define a long-press action on any element in their React application. With just a few lines of code, the hook takes care of handling the intricacies of tracking the long-press duration and triggering the associated callback function.

The useLongPress hook offers flexibility through customizable options. Developers can specify the desired delay for a long press, allowing them to fine-tune the duration required for an action to be triggered. Additionally, the hook intelligently integrates with other custom hooks like useTimeout, useEventListener, and useEffectOnce, enhancing code reusability and maintainability.

import { useRef } from "react" import useLongPress from "./useLongPress" export default function LongPressComponent() { const elementRef = useRef() useLongPress(elementRef, () => alert("Long Press")) return ( <div ref={elementRef} style={{ backgroundColor: "red", width: "100px", height: "100px", position: "absolute", top: "calc(50% - 50px)", left: "calc(50% - 50px)", }} /> ) }

The applications for useLongPress are wide-ranging. Whether you're developing a touch-sensitive UI, implementing context menus, or creating custom gestures, this hook proves to be a valuable tool. From mobile applications to complex web interfaces, useLongPress provides an elegant solution for incorporating long-press interactions that elevate user engagement and improve overall usability.

11
Начать дискуссию
«Газпром» на фоне убытков ждёт реструктуризация, её возглавляет местная «Серсея Ланнистер» Елена Илюхина — FT

Её план как замгендиректора должен «расшевелить болото».

Источник фото: РБК
2626
33
22
11
Сделать убыточным Газпром надо постараться конечно...
Как я превратила личную драму в миллионный бизнес: Секрет "невидимой" платформы, где женщины плачут и покупают

«Два года назад я была мамой в декрете с долгами и нулём на счету. Сегодня мой закрытый «островок доверия» собирает тысячи женских историй, а рекламодатели платят за доступ к аудитории. Расскажу, как стартовала с бюджетом 500К и окупила вложения за полгода»

Как я превратила личную драму в миллионный бизнес: Секрет "невидимой" платформы, где женщины плачут и покупают
99
11
11
11
Новый этап в интернет-рекламе: что ждет заказчиков и агентства после введения 3%-го сбора

Поправки к Закону «О рекламе», вводящие 3%-й сбор с доходов от интернет-рекламы, неизбежно приведут к масштабной перестройке рекламного рынка. Помимо увеличения стоимости рекламы и влияния на рекламные агентства, изменения затронут всех участников отрасли — от крупных корпораций до малого бизнеса. Что же ожидает заказчиков рекламы и маркетинговые а…

Илон Маск подтвердил запуск чат-бота Grok в Telegram

Ранее на релиз намекал основатель мессенджера Павел Дуров.

Источник фото: Bloomberg
3030
1515
33
22
22
11
11
11
"доступен бесплатно владельцам платной подписки" я так ржал
Обложки для YouTube, постеры на русском и макеты сайтов — для чего используют новый генератор изображений в ChatGPT

Собрали первые примеры пользователей.

2929
44
11
11
Почему выплаты за рождение ребёнка (льготная ипотека, подъёмные и т.д.) не поднимают и не поднимут рождаемость? Взгляд инвестиционного юриста на демографию с точки зрения инвестиционной логики

Выплаты за рождение ребёнка (льготная ипотека, подъёмные и проч.) не поднимают и не поднимут рождаемость в стране по следующим причинам.

Почему выплаты за рождение ребёнка (льготная ипотека, подъёмные и т.д.) не поднимают и не поднимут рождаемость? Взгляд инвестиционного юриста на демографию с точки зрения инвестиционной логики
55
Маркировка Честный знак для селлеров Wildberries и Ozon - краткая инструкция

Маркировка «Честный ЗНАК» на Wildberries — обязательное условие для выхода на крупнейшую онлайн-площадку. Без этого продукция просто не попадёт в продажу. Чтобы пройти процедуру без задержек, важно разобраться в сроках, подготовить корректные документы и учесть технические требования. Центр сертификации СерТраст поможет вам оформить всё правильно —…

Не фича, а баг: новый генератор картинок в ChatGPT отказывается создавать «сексуальных женщин», но зато генерирует «сексуальных мужчин»

Глава OpenAI уточнил, что это «ошибка» и её скоро исправят.

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fx.com%2FNickADobos%2Fstatus%2F1904603128374452611&postId=1887605" rel="nofollow noreferrer noopener" target="_blank">Х</a>
2323
99
11
Никакого будущего ии не будет, пока не будет возможности генерировать без цензуры порно
День 1127: дилеры начали предлагать скидки до 1 млн рублей на китайские машины из-за затоваривания складов

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

Фото ТАСС
6565
66
11
Какая скидка... В здравом уме это г@вно никто не возьмет. Если б ввели акцию "миллион тому, кто заберет машину со склада", тогда еще можно было бы подумать.
реклама
разместить
Путин отменил передачу акций российской «дочки» Ariston во временное управление «Газпрому»

Под ним компания проработала почти год.

77
33
11
Российские производители электроники попросили ограничить параллельный импорт ноутбуков, смартфонов и планшетов

А ещё предоставить ритейлерам льготные кредиты на закупку отечественных устройств, субсидировать рекламу и ввести дополнительный утильсбор.

Фото ТАСС
6363
3434
33
22
11
11
11
11
Надеюсь, Светлана Легостаева и прочие лица, задействованные в данном предложении, пользуются ноутбуками, смартфонами и планшетами исключительно отечественного производства?
Сбой у Системы быстрых платежей — СБП-переводы не работают у крупнейших банков

Среди них «Яндекс», «Т-Банк», «Альфа-банк», ВТБ и другие.

Сбой у Системы быстрых платежей — СБП-переводы не работают у крупнейших банков
200
2222
1515
11
11
11
Вот так чуть не пришлось натурой за такси сейчас оплачивать. Хорошо, что наличка нашлась.
[]