React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

Modal

A flexible modal dialog component with backdrop, close button, and keyboard support

Interactive Playground

Customize the modal properties and see the changes in real-time

Common Use Cases

Different modal configurations for various scenarios

Simple Content

Form Modal

Confirmation Dialog

No Close Button

API Reference

Props

isOpen

boolean (required) - Controls modal visibility

onClose

() => void (required) - Callback when modal closes

children

React.ReactNode (required) - Modal content

showCloseButton

boolean (optional) - Show close button in top-right corner (default: true)

closeOnBackdropClick

boolean (optional) - Close modal when clicking backdrop (default: true)

className

string (optional) - Additional classes for backdrop

contentClassName

string (optional) - Additional classes for modal content

Features

  • •Automatically locks body scroll when open
  • •Press ESC key to close modal
  • •Click backdrop to close (configurable)
  • •Optional close button in top-right corner
  • •Accessible with proper ARIA attributes
  • •Centered on screen with backdrop overlay