Components
Starting preview...
Hook useOnClickOutside
npx shadcn@latest add https://21st.dev/r/serafimcloud/useonclickoutside'use client'
import { useRef, useState } from 'react'
import { useOnClickOutside } from "@/components/hooks/useonclickoutside"
function Demo() {
const [isOpen, setIsOpen] = useState(false)
const [theme, setTheme] = useState<'classic' | 'flame' | 'aurora'>('classic')
const ref = useRef(null)
useOnClickOutside(ref, () => setIsOpen(false))
return (
<div className="min-h-screen flex items-center justify-center p-4">
<div ref={ref} className="relative">
<button
onClick={() => setIsOpen(!isOpen)}
className="px-4 py-2 rounded-lg bg-place-color"
style={{
'--bg-angle': '90deg',
'--offset': '2ch',
background: `var(--${theme})`
} as any}
>
Click me to toggle menu
</button>
{isOpen && (
<div className="absolute top-full mt-2 bg-place-color p-4 rounded-lg">
<div className="space-y-2">
<button
className="block w-full text-left"
onClick={() => setTheme('classic')}
>
Classic Theme
</button>
<button
className="block w-full text-left"
onClick={() => setTheme('flame')}
>
Flame Theme
</button>
<button
className="block w-full text-left"
onClick={() => setTheme('aurora')}
>
Aurora Theme
</button>
</div>
</div>
)}
</div>
</div>
)
}
export default { Demo };