useOnClickOutside

Buttons 3

About

Hook useOnClickOutside

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds useOnClickOutside to your project and fits it to your theme.

Code

How useOnClickOutside is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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 };