1.0.4 • Published 7 months ago
@darksnow-ui/modal v1.0.4
@darksnow-ui/modal
A flexible and accessible modal component for React applications.
Installation
pnpm add @darksnow-ui/modalUsage
import { Modal } from "@darksnow-ui/modal"
import "@darksnow-ui/modal/style.css"
function App() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<button onClick={() => setIsOpen(true)}>Open Modal</button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Example Modal"
>
<p>This is the modal content!</p>
</Modal>
</>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | - | Controls whether the modal is visible |
onClose | () => void | - | Callback when the modal should close |
children | React.ReactNode | - | Modal content |
title | string | - | Optional modal title |
closeOnBackdropClick | boolean | true | Close modal when clicking outside |
closeOnEsc | boolean | true | Close modal when pressing Escape key |
className | string | '' | Additional CSS classes |
size | 'small' \| 'medium' \| 'large' \| 'fullscreen' | 'medium' | Modal size preset |
Features
- Accessible (ARIA attributes, keyboard navigation)
- Customizable sizes
- Smooth animations
- Dark mode support
- Responsive design
- Portal rendering for proper z-index management
- Focus management
- Scroll lock when open