UseClickOutsideDemo

1'use client';
2 
3import React, { useRef, useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
7 
8import { useClickOutside } from '@/hooks/guarahooks/use-click-outside';
9 
10export default function UseClickOutsideDemo() {
11  const cardRef = useRef<HTMLDivElement>(null);
12  const [clickedOutside, setClickedOutside] = useState(false);
13 
14  useClickOutside(cardRef, () => {
15    setClickedOutside(true);
16  });
17 
18  return (
19    <Card ref={cardRef} className="w-full max-w-sm relative">
20      <CardHeader>
21        <CardTitle>useClickOutside</CardTitle>
22      </CardHeader>
23      <CardContent className="space-y-4">
24        <p className="text-sm">
25          Click outside of the card to trigger an action.
26        </p>
27        {clickedOutside ? (
28          <div className="text-red-500 font-semibold mb-2">
29            You clicked outside of the card!
30          </div>
31        ) : null}
32        <Button onClick={() => setClickedOutside(false)} variant="outline">
33          Reset
34        </Button>
35      </CardContent>
36    </Card>
37  );
38}