react-hoc-modal
Version:
React component for easy create modals
186 lines (139 loc) • 4.45 kB
Markdown
# React HOC Modal 🚀
[](https://www.npmjs.com/package/react-hoc-modal)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
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
```bash
npm install react-hoc-modal
```
## 🚀 Quick Start
### 1. Set up the Modal Provider
First, wrap your application with the Modal Provider:
```jsx
// 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:
```jsx
// 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
```jsx
// 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
```jsx
const { state } = Modal.useModal();
```
## 📝 Examples
### Basic Usage
```jsx
<button onClick={MyModal.show}>Show Modal</button>
```
### State Management
```jsx
// 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
```jsx
// 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