https://github.com/imykhailychenko/react-modal-dom
Simple and customizable modal with react
https://github.com/imykhailychenko/react-modal-dom
component custom modal react react-modal redux responsive
Last synced: 3 months ago
JSON representation
Simple and customizable modal with react
- Host: GitHub
- URL: https://github.com/imykhailychenko/react-modal-dom
- Owner: iMykhailychenko
- License: mit
- Created: 2020-11-10T16:53:18.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-12T09:37:51.000Z (over 5 years ago)
- Last Synced: 2025-12-25T22:32:33.796Z (7 months ago)
- Topics: component, custom, modal, react, react-modal, redux, responsive
- Language: JavaScript
- Homepage: https://react-modal-dom.netlify.app/
- Size: 883 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-modal-dom
## Lightweight and customizable react modal
We do not limit you with html markup. You can create responsive modal windows of absolutely any format and manage them from anywhere in your react application.
## Installation
```javascript
npm i react-modal-dom
# or
yarn add react-modal-dom
```
## Demo
Check out the demo here https://react-modal-dom.netlify.app/
## Usage
#### Step 1 - add "ModalComponent" into your index.js file.
Note!
Use only one 'ModalComponent' component in the app.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ModalComponent from 'react-modal-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
#### Step 2 - create your custom modal window
```javascript
const MyModal = () => {
return (
Lorem ipsum dolor sit amet consectetur adipisicing elit.
);
};
export default MyModal;
```
What you will get:
#### Step 3 - use css to create styles for your modal
```css
/* example */
.modal {
width: 100%;
max-width: 400px;
padding: 20px;
border-radius: 10px;
background: #fff;
}
```
What you will get:
#### Step 4 - use `modal` obj methods to close or open your modal window
```javascript
import React from 'react';
import { modal } from 'react-modal-dom';
import MyModal from '../MyModal';
const MyApp = () => {
const handleOpenModal = () => {
modal.open()
}
return (
<>
Open modal
Close modal
>
);
};
export default MyApp;
```
## modal object
This object has only 2 methods: `close` and `open`
```javascript
modal.open(, callback)
modal.close(callback)
```
`` - valid react component. Use only jsx sintaxis
`callback` - provide callback that will call immediately after your modal close or open
## Use modal obj methods even in your redux actions
```javascript
import { modal } from 'react-modal-dom';
export const myAction = () => async dispatch => {
dispatch({ type: 'START' });
try {
....
dispatch({ type: 'SUCCESS', payload: data });
// close modal here
modal.close();
```
```javascript
import { modal } from 'react-modal-dom';
function* myWatcher() {
try {
...
yield put({ type: 'SUCCESS', payload: data });
// close modal here
modal.close();
```
## Create function to open your custom modal in redux files
```javascript
import { modal } from 'react-modal-dom';
const MyModal = () => {
return (
Lorem ipsum dolor sit amet consectetur adipisicing elit.
);
};
export const openMyModal = () => {
modal.open()
}
export default MyModal;
```
```javascript
import { openMyModal } from '../MyModal';
export const myAction = () => async dispatch => {
dispatch({ type: 'START' });
try {
...
dispatch({ type: 'SUCCESS', payload: data });
// open your custom modal
openMyModal();
```
```javascript
import { openMyModal } from '../MyModal';
function* myWatcher() {
try {
...
yield put({ type: 'SUCCESS', payload: data });
// open your custom modal
openMyModal();
}
```
## Customize modal backdrop with css
Just write some styles for class `.react-modal-backdrop`. Your styles will be prioritized over library styles.
```css
/* example */
.react-modal-backdrop {
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(15px);
}
```
What you will get:
## Use with reacr-router-dom
By default, the modal does not close when the route is changed. To fix this you need to write this code in your App.js component.
```javascript
import { withRouter } from 'react-router-dom';
import { modal } from 'react-modal-dom';
class App extends Component {
componentDidUpdate({ location }) {
const { pathname } = this.props.location;
if (location.pathname !== pathname) modal.close();
}
}
export default withRouter(App);
// or with hooks
import { useHistory } from 'react-router-dom';
import { modal } from 'react-modal-dom';
const App = () => {
const history = useHistory();
history.listen(modal.close);
...
```
## TODO
- Animations
- Write tests
- TypeScript
- Close modals on route change
- Other