React HOC Modal 🚀

A lightweight and flexible React modal component that makes creating and managing modals a breeze. Built with Higher-Order Components (HOC) pattern for maximum reusability and simplicity.

✨ Features

• 🎯 Simple and intuitive API
• 🔄 State management built-in
• 🎨 Customizable themes
• 📱 Responsive design with bottom sheet support
• 🎭 Multiple modal support
• 🔌 TypeScript support
• 📱 Adaptive bottom sheet for mobile devices

📦 Installation

npm install react-hoc-modal

🚀 Quick Start

1. Set up the Modal Provider

First, wrap your application with the Modal Provider:

// index.jsx
import React from 'react';
import Modal from 'react-hoc-modal';

root.render(
  <React.StrictMode>
    <Modal.Provider>
      <App />
    </Modal.Provider>
  </React.StrictMode>
);

2. Create a Modal Component

Create your modal component using the withModal HOC:

// MyModal.jsx
import React from 'react';
import Modal from 'react-hoc-modal';

const MyModal = () => {
  const { state } = Modal.useModal();
  
  return (
    <div>
      <h2>{state?.title || 'Default Title'}</h2>
      <p>Hello, I am your modal component!</p>
    </div>
  );
};

export default Modal.withModal(MyModal, {
  title: 'My Awesome Modal',
  theme: 'light'
});

3. Use the Modal in Your App

// App.jsx
import React from 'react';
import MyModal from './MyModal';

const App = () => {
  return (
    <div>
      <button onClick={MyModal.show}>
        Open Modal
      </button>
      <MyModal />
    </div>
  );
};

🔧 API Reference

Modal Provider Props

| Prop | Type | Description | |------|------|-------------| | SPA | boolean | Enable SPA mode for better routing integration |

withModal Options

| Option | Type | Description | |--------|------|-------------| | title | string | Modal title | | theme | 'light' | 'dark' | Modal theme | | bottomSheet | boolean | Enable bottom sheet mode for mobile devices | | bottomSheetSnapPoints | string[] | Array of snap points for bottom sheet (e.g. ['50%', '70%']) | | bottomSheetMaxWidth | number | Screen width breakpoint for bottom sheet (default: 550px) |

Modal Methods

| Method | Description | |--------|-------------| | show() | Opens the modal | | hide() | Closes the modal | | setState(data) | Updates modal state |

useModal Hook

const { state } = Modal.useModal();

📝 Examples

Basic Usage

<button onClick={MyModal.show}>Show Modal</button>

State Management

// Update modal state
MyModal.setState({ title: 'New Title' });

// Access state in modal component
const MyModal = () => {
  const { state } = Modal.useModal();
  return <div>{state?.title}</div>;
};

Bottom Sheet Example

// BottomSheetModal.jsx
import React from 'react';
import Modal from 'react-hoc-modal';

const BottomSheetModal = () => {
  const { state } = Modal.useModal();
  
  return (
    <div>
      <h2>{state?.title}</h2>
      <p>This modal will appear as a bottom sheet on mobile devices!</p>
    </div>
  );
};

export default Modal.withModal(BottomSheetModal, {
  title: 'Bottom Sheet Example',
  bottomSheet: true,
  bottomSheetSnapPoints: ['50%', '70%'],
  // Optional: customize breakpoint
  bottomSheetMaxWidth: 550
});

The modal will automatically:

• Display as a bottom sheet on screens smaller than 550px (or your custom size)
• Show as a regular modal on larger screens
• Support snap points for different heights
• Provide smooth transitions between states

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Sergey Serov