react-portal-dialog v1.7.8

Features

React Portal Dialog is an Awesome Customizable and Draggable Modal.

• Basic Modal ✅
• Supports Nested Modal ✅
• Custom Style ✅
• Draggable Modal ✅

Installation

To install, you can use npm or yarn:

npm i react-portal-dialog
yarn add react-portal-dialog

Examples

Here is a simple example of react-portal-dialog being used in an app with some custom styles ModalBody within the modal content:

Live Demo

Basic Modal Example

Nested Modal Example

Basic Modal

import Modal from 'react-portal-dialog';
import { useState } from 'react';

const BasicModal = () => {
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = () => {
        setIsOpen(true);
    };

    const onClose = () => {
        setIsOpen(false);
    };
    return (
        <div>
            <button onClick={onOpen}>Open Modal</button>
            <Modal isOpen={isOpen} onClose={onClose} isOverlay>
                <div style={{ padding: '10px' }}>
                    <button onClick={onClose}>Close Modal</button>
                    <h1>Hello Modal</h1>
                </div>
            </Modal>
        </div>
    );
};
export default BasicModal;

Modal With Custom Style

import Modal from 'react-portal-dialog';
import { useState } from 'react';

const customStyles = {
    maxHeight: '450px',
    width: '400px',
    background: 'lightblue',
};

const CustomStyleModal = () => {
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = () => {
        setIsOpen(true);
    };

    const onClose = () => {
        setIsOpen(false);
    };
    return (
        <div>
            <button onClick={onOpen}>Open Custom Modal</button>
            <Modal
                isOpen={isOpen}
                onClose={onClose}
                customStyles={customStyles}
                isOverlay
            >
                <div style={{ padding: '10px' }}>
                    <button onClick={onClose}>Close Modal</button>
                    <h1>Hello Modal</h1>
                </div>
            </Modal>
        </div>
    );
};
export default CustomStyleModal;

Nested Modal

import Modal from 'react-portal-dialog';
import { useState } from 'react';

const AnotherModal = () => {
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = () => {
        setIsOpen(true);
    };

    const onClose = () => {
        setIsOpen(false);
    };
    return (
        <div>
            <button onClick={onOpen}>Open Child Modal</button>
            <Modal isOpen={isOpen} onClose={onClose} isOverlay>
                <div style={{ padding: '10px' }}>
                    <button onClick={onClose}>Close Child Modal</button>
                    <h1> Child Modal</h1>
                </div>
            </Modal>
        </div>
    );
};
export default AnotherModal;

import Modal from 'react-portal-dialog';
import { useState } from 'react';

const customStyles = {
    maxHeight: '450px',
    width: '400px',
    background: 'lightblue',
};

const NestedModalExample = () => {
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = () => {
        setIsOpen(true);
    };

    const onClose = () => {
        setIsOpen(false);
    };
    return (
        <div>
            <button onClick={onOpen}>Open Modal</button>
            <Modal
                isOpen={isOpen}
                onClose={onClose}
                customStyles={customStyles}
                isOverlay
            >
                <div style={{ padding: '10px' }}>
                    <button onClick={onClose}>Close Modal</button>
                    <AnotherModal />
                    <h1>Hello Modal</h1>
                </div>
            </Modal>
        </div>
    );
};
export default NestedModalExample;

You can find more examples in the examples directory, which you can run in a local development server using npm start or yarn run start

Props