# Modal

Source: https://developers.inkdrop.app/components/modal

A built-in React [component](https://developers.inkdrop.app/modules/component-manager) of Inkdrop that renders a modal overlay.
It handles backdrop clicks, the `Esc` key, focus management, and enter/exit animations.
For a higher-level dialog with a title, content, and actions, use the [Dialog](https://developers.inkdrop.app/components/dialog) component.

To get the class of the `Modal` component:

```tsx
import type { ModalProps } from '@inkdropapp/types'

const Modal = env.components.getComponentClass<ModalProps>('Modal')
```

## Props

```typescript
type ModalProps = {
  className?: string
  children: React.ReactNode
  // Whether the modal is visible.
  visible: boolean
  // Called when the backdrop is clicked.
  onBackdropClick?: () => any
  // Called when the Esc key is pressed.
  onEscKeyDown?: () => any
  // Move focus into the modal when it opens. Defaults to true.
  autofocus?: boolean
  // Restore focus to the previously focused element when it closes.
  autoRestoreFocus?: boolean
  // Play enter/exit animations. Defaults to true.
  animate?: boolean
}
```

## Example

```tsx
import React, { useCallback, useEffect } from 'react'
import { useModal } from 'inkdrop'
import type { ModalProps } from '@inkdropapp/types'

import { getEnv } from './env'

const MyOverlay: React.FC = () => {
  const modal = useModal()
  const Modal = getEnv().components.getComponentClass<ModalProps>('Modal')

  const toggle = useCallback(() => modal.show(), [])

  useEffect(() => {
    const sub = getEnv().commands.add(document.body, {
      'yourplugin:toggle': toggle
    })
    return () => sub.dispose()
  }, [toggle])

  return (
    <Modal {...modal.state} onBackdropClick={modal.close}>
      <div className="my-overlay">Hello, world!</div>
    </Modal>
  )
}

export default MyOverlay
```

`getEnv()` is the small helper — shown in the [Word Count plugin walkthrough](https://developers.inkdrop.app/guides/plugin-word-count#understanding-the-generated-code) — that captures the [Environment](https://developers.inkdrop.app/modules/environment) handed to `activate()` so components can reach it too.

## See also

- [Dialog](https://developers.inkdrop.app/components/dialog) — a higher-level dialog built on top of `Modal`.