Skip to content

sujon-co/react-portal-dialog

Repository files navigation

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

Property Required Types Description Default
isOpen required Boolean whether the modal is open false
onClose required Function Close the modal -
children optional Elements Children elements wrapped in modal body children
customStyles optional Style Update Modal Body Style null
isDraggable optional Boolean Move for Modal Body false
isOverlay optional Boolean Overlay Background true