'use client' import { useInterval } from "@/components/hooks/use-interval" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { useState } from "react" import { Play, Pause, Timer, RotateCw } from "lucide-react" export function UseIntervalDemo() { const [count, setCount] = useState(0) const [delay, setDelay] = useState(1000) const [isPlaying, setPlaying] = useState(false) useInterval( () => { setCount(count + 1) }, isPlaying ? delay : null ) return (

{/* Left Column - Interactive Demo */}

Interval Counter

A counter that increments based on the interval

{/* Counter Display */}

{count}

{/* Controls */}

Interval Delay:

{delay}ms

setDelay(newDelay)} min={100} max={2000} step={100} className="py-4" />

Status: {isPlaying ? ( Running ) : ( Paused )}

{/* Right Column - Documentation */}

About useInterval

A declarative interval hook that can be paused and resumed.

{`const [count, setCount] = useState(0)
const [delay, setDelay] = useState(1000)
const [isPlaying, setPlaying] = useState(false)

useInterval(
  () => {
    setCount(count + 1)
  },
  isPlaying ? delay : null
)`}

Features

Memory leak safe
Supports dynamic delays
Pause/resume functionality
TypeScript ready

Common Use Cases

Polling APIs
Countdown timers
Game loops
Animations

Pro Tip:

Pass null as delay to pause the interval

) }