custom-modal-react

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

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.

import React from 'react';
import ReactDOM from 'react-dom';
import ModalComponent from 'react-modal-dom';
 
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <ModalComponent />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 2 - create your custom modal window

const MyModal = () => {
  return (
    <div className='modal'>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  );
};
 
export default MyModal;

What you will get:

Step 3 - use css to create styles for your modal

/* 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

import React from 'react';
import { modal } from 'react-modal-dom';
 
import MyModal from '../MyModal';
 
const MyApp = () => {
  const handleOpenModal = () => {
    modal.open(<MyModal/>)
  }
  return (
    <>
      <button type="button" onClick={handleOpenModal}>
        Open modal
      </button>
      <button type="button" onClick={modal.close}>
        Close modal
      </button>
    </>
  );
};
 
export default MyApp;

modal object

This object has only 2 methods: close and open

modal.open(<CustomModal/>, callback)
modal.close(callback)

<CustomModal /> - 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

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();
 

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

import { modal } from 'react-modal-dom';
 
const MyModal = () => {
  return (
    <div className='modal'>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  );
};
 
export const openMyModal = () => {
  modal.open(<MyModal />)
}
 
export default MyModal;

import { openMyModal } from '../MyModal';
 
export const myAction = () => async dispatch => {
  dispatch({ type: 'START' });
  try {
    ...
    dispatch({ type: 'SUCCESS', payload: data });
    // open your custom modal
    openMyModal();

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.

/* 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.

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