react-natComponentsModal

Modal Dialog

Componentv0.1.0

A fully accessible window overlaid on primary content. Features smooth entrance animations, frosted glass backdrop blur, ESC key dismissal, focus retention, and customizable sizing.

Interactive Demos & Controls

Click any button to trigger modal

Experience different use cases including standard dialogues, critical destructive prompts, and interactive input forms.

Size

Backdrop Blur

Close on Overlay Click

Close on Escape Key

Installation

Terminal

npm i react-nat-modal

Basic Usage

Controlling a modal using standard React state from react-nat-modal:

ExampleModal.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Modal, Button } from "react-nat-modal";
import { useState } from "react";

export function ExampleModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Account Notification"
        description="Your subscription will automatically renew on November 1st."
        footer={
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Understood
          </Button>
        }
      >
        <p className="text-slate-300">
          You can update your payment method or cancel at any time from your account settings.
        </p>
      </Modal>
    </>
  );
}

Props API Reference

Prop	Type	Default	Description
isOpen	boolean	required	Controls whether the modal is visible or hidden.
onClose	() => void	required	Handler called when the user requests to close the modal.
title	ReactNode	undefined	Header title for the modal dialogue.
description	ReactNode	undefined	Subtext describing the modal content.
size	"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	Max width sizing presets.
backdropBlur	boolean	true	Applies CSS backdrop-filter blur behind the dialog window.
closeOnOverlayClick	boolean	true	Whether clicking the backdrop invokes onClose.
closeOnEscape	boolean	true	Whether pressing the keyboard Escape key closes the modal.
footer	ReactNode	undefined	Bottom action bar elements (buttons, links).