0.0.6 • Published 4 months ago
ios-mo v0.0.6
iOS Mo for React
A beautiful, accessible, and customizable iOS-style modal component for React applications.
Features
- 🎨 Beautiful iOS-like design and animations
- 🌫️ Backdrop blur effect
- 📱 Responsive and mobile-friendly
- ♿ Fully accessible (WAI-ARIA compliant)
- ⌨️ Keyboard navigation support
- 🎯 TypeScript support
- 🎨 Highly customizable
- 🪶 Lightweight
Installation
npm install ios-moUsage
import { IOSModal } from 'ios-mo';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<IOSModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Welcome"
actions={[
{
label: 'Cancel',
onClick: () => setIsOpen(false),
variant: 'outline'
},
{
label: 'Continue',
onClick: () => setIsOpen(false)
}
]}
>
<p>Modal content here</p>
</IOSModal>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | required | Controls the visibility of the modal |
| onClose | () => void | required | Function called when the modal should close |
| children | ReactNode | required | Content to be rendered inside the modal |
| title | string | undefined | Modal title |
| description | string | undefined | Modal description |
| actions | ModalAction[] | [] | Array of action buttons |
| size | 'sm' | 'md' | 'lg' | 'full' | 'md' | Controls the width of the modal |
| position | 'bottom' | 'center' | 'bottom' | Modal position on screen |
| showCloseButton | boolean | true | Show/hide the close button |
| closeOnOutsideClick | boolean | true | Close modal when clicking outside |
| className | string | undefined | Additional CSS classes |
ModalAction Type
interface ModalAction {
label: string;
onClick: () => void;
variant?: 'default' | 'destructive' | 'outline' | 'ghost';
className?: string;
}Accessibility
The modal is built with accessibility in mind:
- Proper ARIA attributes
- Focus management
- Keyboard navigation
- Screen reader support
- Focus trap within the modal
License
MIT © Tiavina