frutjam/packages/react/useModal.js

CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.

import { useRef, useCallback } from 'react'

export function useModal() {
  const ref = useRef(null)
  return {
    ref,
    open: useCallback(() => ref.current?.showModal(), []),
    close: useCallback(() => ref.current?.close(), []),
    toggle: useCallback(() => (ref.current?.open ? ref.current.close() : ref.current?.showModal()), []),
    isOpen: () => ref.current?.open ?? false,
  }
}