Modal

Convenient modals for your React webapp

npm i @hazae41/modal

NPM 📦

Demo

https://brume.tech

Usage

You have to use React and Tailwind with LaBase framework

import { Window } from "@hazae41/modal"
import { CloseContext } from "@hazae41/react-close-context"

export function App() {
  const [open, setOpen] = useState<MouseEvent>()

  const onOpen = useCallback((e: MouseEvent) => {
    setOpen(e)
  }, [])

  const onClose = useCallback(() => {
    setOpen(undefined)
  }, [])

  return <div>
    {open && <CloseContext close={onClose}>
      <Window x={open.clientX} y={open.clientY}>
          Hello world!
      </Window>
    </CloseContext>}
    <button onClick={onOpen}>
      Click me
    </button>
  </div>
}

You can also use Chemin to use X and Y coords in the URL path

import { PathWindow } from "@hazae41/modal"
import { usePathContext, useAnchorWithCoords } from "@hazae41/chemin"

export function App() {
  const path = usePathContext().getOrThrow()

  const hello = useAnchorWithCoords(path, "/hello")

  return <div>
    {path.url.pathname === "/hello" &&
      <PathWindow>
        Hello world!
      </PathWindow>}
    <a href={hello.url.href}
      onClick={hello.onClick}
      onKeyDown={hello.onKeyDown}>
      Click me
    </a>
  </div>
}