useToggle

useToggle hooki, boolean holatini boshqarishni osonlashtiruvchi maxsus React hookidir.

useToggle Hook

useToggle hooki, boolean holatini boshqarishni osonlashtiruvchi maxsus React hookidir. U holatni true va false o'rtasida osonlik bilan almashtirish uchun toggle funktsiyasini taqdim etadi. Ushbu hook, ko'rinishlarni boshqarish (masalan, modallar, dropdownlar) yoki foydalanuvchi interfeysida xususiyatlarni o'zgartirish kabi vaziyatlar uchun ayniqsa foydalidir.

O'rnatish

npm install @udemere/usehooks

##3 Foydalanish

import { useToggle } from '@udemere/usehooks'
 
const MyComponent = () => {
	const [isOpen, toggleOpen] = useToggle() // Mavjud boshlang'ich qiymat false
 
	return (
		<div>
			<button onClick={toggleOpen}>{isOpen ? 'Yopish' : 'Ochilishi'} Modal</button>
			{isOpen && <div>Bu modal!</div>}
		</div>
	)
}

Parametrlar

Qaytadi

• Quyidagi elementlardan iborat massiv:
  • Hozirgi holat qiymati (boolean).
  • Holatni o'zgartiruvchi funktsiya (() => void).

Misol

const ExampleComponent = () => {
	const [isToggled, toggle] = useToggle(true) // Boshlang'ich qiymat true ga o'rnatilgan
 
	return (
		<div>
			<p>Ulanish {isToggled ? 'YOQILGAN' : 'O'CHIRILGAN'}</p>
			<button onClick={toggle}>O'zgartirish</button>
		</div>
	)
}

Eslatmalar

• useToggle hooki boolean holatlarni boshqarishdagi murakkabliklarni yashiradi, bu esa toza va o'qilishi oson kod yozishga imkon beradi.
• Boshlang'ich qiymatni o'zgartirish uchun hook chaqirilganda boolean argumentini uzatish orqali o'zgartirish mumkin.