useHover

useHover hooki, muayyan HTML elementiga sichqoncha bilan bosish holatini aniqlashga yordam beruvchi maxsus React hookidir.

useHover Hook

useHover hooki, muayyan HTML elementiga sichqoncha bilan bosish holatini aniqlashga yordam beruvchi maxsus React hookidir. Bu hover holatini kuzatish uchun oson interfeys taqdim etadi, bu esa interaktiv UI elementlarini qo'shish uchun juda qulaydir.

O'rnatish

npm install @udemere/usehooks

Foydalanish

import { useHover } from '@udemere/usehooks'
 
const HoverComponent: React.FC = () => {
	const [hoverRef, isHovered] = useHover<HTMLDivElement>()
 
	return (
		<div>
			<div
				ref={hoverRef}
				style={{
					width: '200px',
					height: '200px',
					backgroundColor: isHovered ? 'lightblue' : 'lightgray',
					transition: 'background-color 0.3s',
				}}
			>
				{isHovered ? 'Hover qilingan!' : 'Meni hover qiling!'}
			</div>
		</div>
	)
}

API

useHover

useHover<T extends HTMLElement>(): [React.RefObject<T>, boolean]

Parametrlar:

• T extends HTMLElement: Hover holatini aniqlamoqchi bo'lgan HTML elementining turi. Bu generik tur argumenti sifatida berilishi kerak.

Natijalar:

• ref (React.RefObject<T>): Kuzatmoqchi bo'lgan HTML elementiga ulanishi kerak bo'lgan ref obyekti.
• isHovered (boolean): Element hozirda hover qilinganligini bildiruvchi boolean.

Misol

import React from 'react'
import { useHover } from '@udemere/usehooks'
 
const ButtonWithHover: React.FC = () => {
	const [hoverRef, isHovered] = useHover<HTMLButtonElement>()
 
	return (
		<button ref={hoverRef} style={{ color: isHovered ? 'blue' : 'black' }}>
			{isHovered ? 'Hover qilingan!' : 'Meni hover qiling!'}
		</button>
	)
}
 
export default ButtonWithHover

Xususiyatlar:

• Qayta foydalanish: useHover hooki har qanday element uchun qayta ishlatilishi mumkin.
• Tozalash: Hook, komponent chiqarilganda yoki ref o'zgarganda voqea tinglovchilarini tozalashni boshqaradi, bu esa xotira oqimlarining oldini oladi.