react-overlay-modal v0.1.5

React Overlay Modal

A minimalistic, super lightweight and accessible React modal library that offers robust type safety. This headless solution gives you full flexibility to integrate your own content and styles without worrying about z-index or complex configurations.

Features

1. No dependencies other than React.
2. Fully accessible with proper ARIA attributes.
3. Lightweight and headless (no pre-applied styles).
4. Typescript support for type safety.
5. Minimal configuration with support for custom styling.

Demo

View the Demo

Install

npm i react-overlay-modal

Wrap the root app with ModalProvider

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App.tsx"
import { ModalProvider } from "react-overlay-modal"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ModalProvider>
      <App />
    </ModalProvider>
  </StrictMode>,
)

Usage

import { useModal } from "react-overlay-modal"

function ModalContent() {
  const { closeModal } = useModal()
  return (
    <div>
      <h2>✨ Welcome to Cool Modal!</h2>
      <button
        onClick={closeModal}
        className="btn secondary"
      >
        ✨ Close Modal
      </button>
    </div>
  )
}

export default function Page() {
  const { showModal } = useModal()
  return (
    <button
      className="btn primary"
      onClick={() => showModal({
        content: <ModalContent />,
        size: "md"
      })}
    >
      ✨ Open Cool Modal
    </button>
  )
}

API

Props

Modal Size

Modal Body Props