# @nature-ui/modal

> An accessible dialog (modal) component for React & Nature UI

Latest version **2.2.13** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nature-ui/modal
pnpm add @nature-ui/modal
yarn add @nature-ui/modal
bun add @nature-ui/modal
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.13 |
| Published | 2023-04-12 |
| First published | 2020-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 95.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Divine Hycenth |
| Maintainers | dnature |
| Keywords | react, react component, modal, dialog, modal dialog, accessible modal, aria modal, a11y modal, accessible modal, modal component, react modal component, react modal, nature ui |

## Links

- npm: https://www.npmjs.com/package/@nature-ui/modal
- Repository: https://github.com/DNature/nature-ui
- Issues: https://github.com/DNature/nature-ui/issues
- npm.io page: https://npm.io/package/@nature-ui/modal

## Dependencies (9)

- [aria-hidden](https://npm.io/package/aria-hidden.md) ^1.2.2
- [@nature-ui/hooks](https://npm.io/package/@nature-ui/hooks.md) 2.2.13
- [@nature-ui/utils](https://npm.io/package/@nature-ui/utils.md) 2.2.13
- [@nature-ui/portal](https://npm.io/package/@nature-ui/portal.md) 2.2.13
- [react-remove-scroll](https://npm.io/package/react-remove-scroll.md) ^2.5.5
- [@nature-ui/focus-lock](https://npm.io/package/@nature-ui/focus-lock.md) 2.2.13
- [@nature-ui/transition](https://npm.io/package/@nature-ui/transition.md) 2.2.13
- [@nature-ui/react-utils](https://npm.io/package/@nature-ui/react-utils.md) 2.2.13
- [@nature-ui/close-button](https://npm.io/package/@nature-ui/close-button.md) 2.1.13

## 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

- 2.2.13 (latest) — 2023-04-12
- 0.0.0-dev-20230411071731 (dev) — 2023-04-11
- 2.2.12 — 2023-04-12
- 2.2.11 — 2023-04-12
- 0.0.1 — 2023-04-11
- 0.0.0 — 2023-04-11
- 0.0.0-dev-20230410162901 — 2023-04-10
- 0.0.0-dev-20230410131720 — 2023-04-10
- 0.0.0-dev-20230409203337 — 2023-04-09
- 0.0.0-dev-20230409203113 — 2023-04-09
- 0.0.0-dev-20230409201910 — 2023-04-09
- 4.0.1 — 2023-04-09
- 4.0.0 — 2023-03-01
- 0.0.0-dev-20230301133840 — 2023-03-01
- 0.0.0-dev-20230301120121 — 2023-03-01
- … 27 more at https://npm.io/package/@nature-ui/modal/versions

## README

# Modal

A modal is a window overlaid on either the primary window or another dialog
window. Contents behind a modal dialog are **inert** meaning that users cannot
interact with content behind the dialog.

## Installation

```sh
yarn add @nature-ui/modal

# or

npm i @nature-ui/modal
```

## Import components

```jsx
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  ModalCloseButton,
} from '@nature-ui/core';
```

## Usage

When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbled element, focus is set on the `ModalContent`.

```jsx
export const BasicUsage = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open</Button>

      <Modal
        variant='blur'
        scrollBehavior='outside'
        isOpen={isOpen}
        onClose={onClose}
      >
        <ModalOverlay>
          <ModalContent>
            <ModalCloseButton />

            <ModalHeader>Welcome Home</ModalHeader>

            <ModalBody>Sit nulla est ex deserunt ...</ModalBody>

            <ModalFooter>
              <Button
                onClick={onClose}
                className='bg-gray-200 hover:bg-gray-300 transition duration-200 mr-3'
              >
                Cancel
              </Button>
              <Button className='bg-blue-600 text-white hover:bg-blue-500 ml-3'>
                Save
              </Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  );
};
```

### Control Focus when Modal closes

When the dialog closes, it returns focus to the element that triggered. Set
`finalFocusRef` to element that should receive focus when the modal opens.

```jsx

export const ReturnFocus = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const finalRef = React.useRef<any>();

  return (
    <>
      <div ref={finalRef} tabIndex={-1} aria-label='Focus moved to this box'>
        Some other content that&apos;ll receive focus on close.
      </div>

      <Button mt={4} onClick={onOpen}>
        Open Modal
      </Button>

      <Modal
        variant='normal'
        finalFocusRef={finalRef}
        isOpen={isOpen}
        onClose={onClose}
      >
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              Sit nulla est ex ...
            </ModalBody>

            <ModalFooter>
              <Button onClick={onClose}>Close</Button>
              <Button variant='ghost'>Secondary Action</Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  );
};

```

---
_Source: https://npm.io/package/@nature-ui/modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._