useCountdown

Countdown timerini boshqaradigan maxsus hook bo'lib, u countdownni boshlash, to'xtatish va qayta tiklash uchun variantlarni taklif etadi.

useCountdown Hook

Countdown timerini boshqaradigan maxsus hook bo'lib, u countdownni boshlash, to'xtatish va qayta tiklash uchun variantlarni taklif etadi. Ushbu hook berilgan variantlarga asoslanib, yuqoriga yoki pastga hisoblaydi.

O'rnatish

Ushbu hookdan foydalanish uchun @udemere/usehooks kutubxonasini o'rnatganingizga ishonch hosil qiling:

npm install @udemere/usehooks

Foydalanish

import { useCountdown } from "@udemere/usehooks";
 
const ExampleComponent = () => {
  const [count, { startCountdown, stopCountdown, resetCountdown }] =
    useCountdown({
      countStart: 10,
      intervalMs: 1000,
      isIncrement: false,
    });
 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={startCountdown}>Boshlash</button>
      <button onClick={stopCountdown}>To'xtatish</button>
      <button onClick={resetCountdown}>Qayta tiklash</button>
    </div>
  );
};

Parametrlar

countdownOptions

Countdown xulq-atvorini sozlaydigan ob'ekt:

• countStart: number (majburiy)

  • Countdown uchun boshlang'ich raqam, bu hook tomonidan qaytariladigan dastlabki qiymat bo'ladi.

• intervalMs: number (ixtiyoriy)

  • Har bir countdown urishida millisekundlarda interval. Dastlabki qiymati 1000.

• isIncrement: boolean (ixtiyoriy)

  • Agar true ga o'rnatilsa, countdown kamayish o'rniga ortadi. Dastlabki qiymati false.

• countStop: number (ixtiyoriy)

  • Countdown uchun to'xtash raqami. Doimiy kamayishni ta'minlash uchun -Infinity ni o'tkazing. Dastlabki qiymati 0.

Qaytaradi

Hozirgi hisob va countdown boshqaruvchilari bilan birgalikda massivni qaytaradi:

• [number, CountdownControllers]
  • count: Countdownning joriy qiymati.
  • CountdownControllers: Quyidagi metodlarni o'z ichiga olgan ob'ekt:
    • startCountdown: Countdownni boshlash uchun funksiya.
    • stopCountdown: Countdownni to'xtatish uchun funksiya.
    • resetCountdown: Countdownni boshlang'ich raqamga qaytarish uchun funksiya.

Misol

const [counter, { start, stop, reset }] = useCountdown({
  countStart: 10,
  intervalMs: 1000,
  isIncrement: false,
});

Eslatmalar

• Countdown intervalMs variantiga asoslangan holda ishlaydi, berilgan intervalda ortish yoki kamayish funksiyasini chaqiradi.
• Countdownning hayot tsiklini to'g'ri boshqarish (boshlash, to'xtatish, qayta tiklash) uchun taqdim etilgan boshqaruvchilarni ishlating, bu xotira oqimlari yoki kutilmagan xatti-harakatlarning oldini olishga yordam beradi.
• Ushbu hook countdown holatini boshqarish uchun @udemere/usehooks kutubxonasidan useBoolean, useCounter, va useInterval dan foydalanadi.