@ebay/nice-modal-react

You can integrate nice-modal-react with Redux to track and debug modal state changes using Redux DevTools. To do this, add NiceModal.reducer to your root reducer and pass the modals state and dispatch function to the NiceModal.Provider.

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import NiceModal from '@ebay/nice-modal-react';

const store = createStore(
  combineReducers({
    modals: NiceModal.reducer,
    // other reducers...
  }),
);

const ModalsProvider = ({ children }) => {
  const modals = useSelector((s) => s.modals);
  const dispatch = useDispatch();
  return (
    <NiceModal.Provider modals={modals} dispatch={dispatch}>
      {children}
    </NiceModal.Provider>
  );
};

export default function ReduxProvider({ children }) {
  return (
    <Provider store={store}>
      <ModalsProvider>{children}</ModalsProvider>
    </Provider>
  );
}

// First combine the reducer
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import NiceModal from '@ebay/nice-modal-react';
import { Button } from 'antd';
import { MyAntdModal } from './MyAntdModal';
import logger from 'redux-logger';

const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const enhancer = composeEnhancers(applyMiddleware(logger));

const store = createStore(
  combineReducers({
    modals: NiceModal.reducer,
    // other reducers...
  }),
  enhancer,
);

// Passing Redux state to the nice modal provider
const ModalsProvider = ({ children }) => {
  const modals = useSelector((s) => s.modals);
  const dispatch = useDispatch();
  return (
    <NiceModal.Provider modals={modals} dispatch={dispatch}>
      {children}
    </NiceModal.Provider>
  );
};

export default function ReduxProvider({ children }) {
  return (
    <Provider store={store}>
      <ModalsProvider>{children}</ModalsProvider>
    </Provider>
  );
}

To create a modal component, wrap your component with the NiceModal.create higher-order component. This ensures the component is only executed when it becomes visible. Inside the component, use the useModal hook to manage visibility and lifecycle.

Key behaviors:

• Uncontrolled: You can call modal.hide() from within the component itself.
• Lifecycle: Use modal.remove() (e.g., in an afterClose callback) to remove the component from the React tree and preserve UI transitions.

Note: nice-modal-react is a management utility, not a UI component. You should use it alongside a UI library like Ant Design, Material UI, or Bootstrap.

import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

export default NiceModal.create(({ name }: { name: string }) => {
  // Use a hook to manage the modal state
  const modal = useModal();
  return (
    <Modal
      title="Hello Antd"
      onOk={() => modal.hide()}
      visible={modal.visible}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});

The useModal hook provides a controller object to manage a modal's lifecycle. You can pass either a registered ID or a component reference to the hook.

• modal.show(props): Displays the modal.
• modal.hide(): Hides the modal.

import NiceModal, { useModal } from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal';

NiceModal.register('my-antd-modal', MyAntdModal);

// Using with ID (requires registration)
const modalById = useModal('my-antd-modal');

// Using with Component (no registration required)
const modalByComp = useModal(MyAntdModal);

// Usage
modalById.show({ name: 'Nate' });
modalById.hide();

import NiceModal, { useModal } from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

NiceModal.register('my-antd-modal', MyAntdModal);
//...
// if you use with id, you need to register it first
const modal = useModal('my-antd-modal');
// or if with component, no need to register
const modal = useModal(MyAntdModal);

//...
modal.show({ name: 'Nate' }); // show the modal
modal.hide(); // hide the modal
//...

To control a modal by a string ID, you must first register the component using NiceModal.register(id, component). This is useful for centralizing modal definitions in a single file.

import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal';

// Register the modal component with an ID
NiceModal.register('my-antd-modal', MyAntdModal);

function App() {
  const showAntdModal = () => {
    // Show the registered modal by its ID
    NiceModal.show('my-antd-modal', { name: 'Nate' })
  };
  return (
    <div className="app">
      <button onClick={showAntdModal}>Antd Modal</button>
    </div>
  );
}

import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

// If you use by id, you need to register the modal component.
// Normally you create a modals.js file in your project
// and register all modals there.
NiceModal.register('my-antd-modal', MyAntdModal);

function App() {
  const showAntdModal = () => {
    // Show a modal with arguments passed to the component as props
    NiceModal.show('my-antd-modal', { name: 'Nate' })
  };
  return (
    <div className="app">
      <h1 className="Nice Modal Examples">Nice Modal Examples</h1>
      <div className="demo-buttons">
        <button onClick={showAntdModal}>Antd Modal</button>
      </div>
    </div>
  );
}

To quickly bind nice-modal-react state to popular UI libraries, use the provided helper functions. These helpers map the modal controller's properties (like visible, hide, and remove) to the specific props required by the UI library.

Available Helpers:

• Material UI: muiDialog(modal), muiDialogV5(modal)
• Ant Design: antdModal(modal), antdModalV5(modal), antdDrawer(modal), antdDrawerV5(modal)
• Bootstrap: bootstrapDialog(modal)

Example Usage:

import NiceModal, { antdModal } from '@ebay/nice-modal-react';

const modal = useModal();

<Modal {...antdModal(modal)}>
  Content
</Modal>

Note: You can override properties after the helper is spread. For example, <Modal {...antdModal(modal)} onOk={customHandler} /> will use your customHandler instead of the default one provided by the helper.

import NiceModal, {
  muiDialog,
  muiDialogV5,
  antdModal,
  antdModalV5,
  antdDrawer,
  antdDrawerV5,
  bootstrapDialog
} from '@ebay/nice-modal-react';

//...
const modal = useModal();
// For MUI
<Dialog {...muiDialog(modal)}>

// For MUI V5
<Dialog {...muiDialogV5(modal)}>

// For ant.design
<Modal {...antdModal(modal)}>

// For ant.design v4.23.0 or later
<Modal {...antdModalV5(modal)}>

// For antd drawer
<Drawer {...antdDrawer(modal)}>

// For antd drawer v4.23.0 or later
<Drawer {...antdDrawerV5(modal)}>

// For bootstrap dialog
<Dialog {...bootstrapDialog(modal)}>