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

1npm install react-hoc-modal

🚀 Quick Start

1. Set up the Modal Provider

First, wrap your application with the Modal Provider:

1// index.jsx
2import React from 'react';
3import Modal from 'react-hoc-modal';
4
5root.render(
6  <React.StrictMode>
7    <Modal.Provider>
8      <App />
9    </Modal.Provider>
10  </React.StrictMode>
11);

2. Create a Modal Component

Create your modal component using the withModal HOC:

1// MyModal.jsx
2import React from 'react';
3import Modal from 'react-hoc-modal';
4
5const MyModal = () => {
6  const { state } = Modal.useModal();
7  
8  return (
9    <div>
10      <h2>{state?.title || 'Default Title'}</h2>
11      <p>Hello, I am your modal component!</p>
12    </div>
13  );
14};
15
16export default Modal.withModal(MyModal, {
17  title: 'My Awesome Modal',
18  theme: 'light'
19});

3. Use the Modal in Your App

1// App.jsx
2import React from 'react';
3import MyModal from './MyModal';
4
5const App = () => {
6  return (
7    <div>
8      <button onClick={MyModal.show}>
9        Open Modal
10      </button>
11      <MyModal />
12    </div>
13  );
14};

🔧 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

1const { state } = Modal.useModal();

📝 Examples

Basic Usage

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

State Management

1// Update modal state
2MyModal.setState({ title: 'New Title' });
3
4// Access state in modal component
5const MyModal = () => {
6  const { state } = Modal.useModal();
7  return <div>{state?.title}</div>;
8};

Bottom Sheet Example

1// BottomSheetModal.jsx
2import React from 'react';
3import Modal from 'react-hoc-modal';
4
5const BottomSheetModal = () => {
6  const { state } = Modal.useModal();
7  
8  return (
9    <div>
10      <h2>{state?.title}</h2>
11      <p>This modal will appear as a bottom sheet on mobile devices!</p>
12    </div>
13  );
14};
15
16export default Modal.withModal(BottomSheetModal, {
17  title: 'Bottom Sheet Example',
18  bottomSheet: true,
19  bottomSheetSnapPoints: ['50%', '70%'],
20  // Optional: customize breakpoint
21  bottomSheetMaxWidth: 550
22});

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