React Mobile Modals

A powerful and flexible React library for creating native-like modal navigation in mobile web applications. Perfect for creating seamless, app-like experiences in your web applications.

✨ Features

• 🚀 Native-like modal transitions and animations
• 📱 Mobile-first design approach
• ↔️ Support for both horizontal and vertical transitions
• 🎨 Highly customizable
• 🔄 Smooth navigation flow
• 💡 Simple and intuitive API
• 📦 Lightweight with minimal dependencies
• 🛠 TypeScript support out of the box

🚀 Installation

Using npm:

npm install react-mobile-modals

Using yarn:

yarn add react-mobile-modals

🛠 Quick Start

1. Wrap your application with ModalsProvider:

import { ModalsProvider } from 'react-mobile-modals';
import 'react-mobile-modals/dist/index.css';

const App = () => {
  return (
    <ModalsProvider>
      {/* Your app content */}
    </ModalsProvider>
  );
};

2. Use the modal navigation anywhere in your components:

import { useModals } from 'react-mobile-modals';

const MyComponent = () => {
  const { openModal, closeModal } = useModals();

  const handleOpenModal = () => {
    openModal({
      component: <YourModalComponent />,
      openDirection: 'horizontal' // or 'vertical'
    });
  };

  return (
    <button onClick={handleOpenModal}>
      Open Modal
    </button>
  );
};

📖 API Reference

ModalsProvider

The root component that enables modal functionality in your application.

<ModalsProvider>
  <YourApp />
</ModalsProvider>

useModals Hook

A custom hook that provides modal control functions.

const { openModal, closeModal } = useModals();

openModal Options

| Property | Type | Required | Default | Description | |------------|-------------------------|----------|--------------|-------------------------------------------| | component | ReactNode | Yes | - | The component to render in the modal | | openDirection | 'horizontal' \| 'vertical' | No | 'horizontal' | The direction of the modal animation |

🌟 Advanced Usage

Nested Modals

You can create nested modal flows for complex navigation patterns:

const NestedExample = () => {
  const { openModal, closeModal } = useModals();

  const openNestedModal = () => {
    openModal({
      component: (
        <div>
          <h2>Nested Modal</h2>
          <button onClick={closeModal}>Close</button>
        </div>
      ),
      openDirection: 'vertical'
    });
  };

  return (
    <div>
      <h1>First Modal</h1>
      <button onClick={openNestedModal}>Open Nested</button>
    </div>
  );
};

🎯 Use Cases

• Mobile-first web applications
• Progressive Web Apps (PWAs)
• Mobile web views within native applications
• Complex modal workflows
• Multi-step forms and wizards

🔗 Live Demo

Check out our live demo to see React Mobile Modals in action!

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request.

📄 License

MIT © skilldill