Nice Modal Management Utility By eBay

A small, flexible, zero dependency, promise based utility to manage modals in a natural way for React.

It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id.

Compatible with popular UI component libraries like Material UIAnt.DesignBootstrap React, etc.

How to use it:

1. Install and import the modal utility into your project.

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Slide from '@material-ui/core/Slide';
import { TransitionProps } from '@material-ui/core/transitions';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

2. This example shows how to create a Material UI modal with this utility.

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & { children?: React.ReactElement<any, any> },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
const MyMuiDialog = NiceModal.create(() => {
  const modal = useModal();
  return (
      onClose={() => modal.hide()}
        onExited: () => modal.remove(),
      <DialogTitle id="alert-dialog-slide-title">{"Use Google's location service?"}</DialogTitle>
        <DialogContentText id="alert-dialog-slide-description">
          Let Google help apps determine location. This means sending anonymous location data to Google, even when no
          apps are running.
        <Button onClick={() => modal.hide()} color="primary">
        <Button onClick={() => modal.hide()} color="primary">
export default function MuiDialogSample() {
  return (
    <Button variant="contained" onClick={() =>} color="primary">


Nice Modal Management Utility By eBay

Download Details:

Author: eBay

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment