# react-portal-dialog

> React Portal Dialog is an Awesome Customizable and Draggable Modal.

Latest version **1.7.8** (published 2022-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-portal-dialog
pnpm add react-portal-dialog
yarn add react-portal-dialog
bun add react-portal-dialog
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.8 |
| Published | 2022-01-22 |
| First published | 2021-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 53.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sujon Hossain |
| Maintainers | sujonhossainbd |
| Keywords | react, react-modal, react-portal-dialog, react-portal-modal, react-dialog, modal, portal |

## Links

- npm: https://www.npmjs.com/package/react-portal-dialog
- Repository: https://github.com/SujonHossain1/react-portal-modal
- Homepage: https://github.com/SujonHossain1/react-portal-modal#readme
- Issues: https://github.com/SujonHossain1/react-portal-modal/issues
- npm.io page: https://npm.io/package/react-portal-dialog

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.7.8 (latest) — 2022-01-22
- 1.7.7 — 2022-01-22
- 1.7.6 — 2022-01-22
- 1.7.5 — 2022-01-21
- 1.7.1 — 2022-01-21
- 1.7.0 — 2022-01-21
- 1.6.0 — 2022-01-21
- 1.5.0 — 2022-01-12
- 1.4.0 — 2022-01-12
- 1.3.0 — 2021-12-10
- 1.2.0 — 2021-12-10
- 1.1.0 — 2021-12-10
- 1.0.0 — 2021-12-10

## README

### 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](https://npmjs.org/) or [yarn](https://yarnpkg.com):

```bash
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](https://codesandbox.io/s/naughty-fire-pmfod)

[Nested Modal Example](https://codesandbox.io/s/react-portal-dialog-nested-example-siimn)

#### Basic Modal

```jsx
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

```jsx
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

```jsx
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     |

---
_Source: https://npm.io/package/react-portal-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._