React Modal Manager

A lightweight and flexible modal component for React, inspired by jquery-modal. Supports context-based triggering, animations, accessibility, and customization.

Features

• ✅ Global modal management with openModal and closeModal
• ✅ Customizable modal appearance via props
• ✅ Accessible by default (focus trap, ARIA attributes)
• ✅ Supports any React node as modal content
• ✅ Lightweight and easy to integrate

Installation

npm install @vincentwings/react-modal

Usage

1. Wrap your app with ModalProvider

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ModalProvider } from '@vincentwings/react-modal'

ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  document.getElementById('root')
)

2. Use the useModal hook to open modals from anywhere

import React from 'react'
import { useModal } from '@vincentwings/react-modal'

function ExampleModalTrigger() {
  const { openModal, closeModal } = useModal()

  const handleOpen = () => {
    openModal(
      <div style={{ textAlign: 'center' }}>
        <h2>Modal Title</h2>
        <p>This is a simple modal content.</p>
        <button onClick={closeModal}>Close</button>
      </div>,
      {
        backgroundColor: '#fff',
        textColor: '#333',
        borderRadius: '10px',
        fadeDuration: 300,
        escapeClose: true,
        clickClose: true,
        showClose: true
      }
    )
  }

  return <button onClick={handleOpen}>Open Modal</button>
}

3. Modal Props Reference

Accessibility

• Traps focus inside the modal while open
• Supports Escape key to close (if escapeClose is enabled)
• Adds aria-modal and role="dialog" to the modal overlay

Example Project

Want to see it in action? Check it out: 👉 https://github.com/VincentWings/HRnet