# Dialog

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

> **Note:**
>
> Available since v3.5.1.

A built-in React [component](https://developers.inkdrop.app/modules/component-manager) of Inkdrop that displays a modal dialog.
It is built on top of the [Modal](https://developers.inkdrop.app/components/modal) component and provides
`Title`, `Content`, and `Actions` sub-components for laying out a dialog.

To get the class of the `Dialog` component:

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

const Dialog = env.components.getComponentClass('Dialog') as Dialog
```

> **Note:**
>
> `Dialog` is cast to its type so that the `Dialog.Title`, `Dialog.Content`, and
> `Dialog.Actions` sub-components are typed. A plain
> `getComponentClass<DialogProps>('Dialog')` only types the props.

## Props

`Dialog` accepts all [Modal](https://developers.inkdrop.app/components/modal) props in addition to the following:

```typescript
type DialogProps = ModalProps & {
  className?: string
  children?: React.ReactNode
  // Render the dialog at a larger width.
  large?: boolean
}
```

### Sub-components

- **Dialog.Title** (React.FC\<DialogTitleProps>)

  The header of the dialog.
  ```typescript
  type DialogTitleProps = {
    className?: string
    children?: React.ReactNode
  }
  ```
- **Dialog.Content** (React.FC\<DialogContentProps>)

  The main body of the dialog.
  ```typescript
  type DialogContentProps = {
    className?: string
    // Lay out the content as a flex container.
    flex?: boolean
    // Remove the default padding.
    noPadding?: boolean
    children?: React.ReactNode
    // The CSS `overflow` value applied to the content.
    overflow?: React.CSSProperties['overflow']
  }
  ```
- **Dialog.Actions** (React.FC\<DialogActionsProps>)

  The footer of the dialog, typically containing buttons.
  ```typescript
  type DialogActionsProps = {
    className?: string
    children?: React.ReactNode
  }
  ```

## Example

```tsx
import React, { useEffect, useCallback } from 'react'
import { logger, useModal } from 'inkdrop'
import type { Dialog as DialogType } from '@inkdropapp/types'

import { getEnv } from './env'

const HelloMessageDialog: React.FC = () => {
  const modal = useModal()
  const Dialog = getEnv().components.getComponentClass('Dialog') as DialogType

  const toggle = useCallback(() => {
    modal.show()
    logger.debug('Dialog was toggled!')
  }, [])

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

  return (
    <Dialog {...modal.state} onBackdropClick={modal.close}>
      <Dialog.Title>Example</Dialog.Title>
      <Dialog.Content>Hello, world!</Dialog.Content>
      <Dialog.Actions>
        <button className="ui button" onClick={modal.close}>
          Close
        </button>
      </Dialog.Actions>
    </Dialog>
  )
}

export default HelloMessageDialog
```

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

A dialog is a top-level overlay, so it only appears once you
[**register**](https://developers.inkdrop.app/modules/component-manager#registering-and-unregistering-a-react-component)
it and add it to the built-in `modal` layout — the region where Inkdrop mounts modal
overlays. Do this in your plugin's `activate` / `deactivate`:

```ts
import type { Environment } from '@inkdropapp/types'
import HelloMessageDialog from './HelloMessageDialog'

export function activate(env: Environment) {
  env.components.registerClass(HelloMessageDialog)
  env.layouts.addComponentToLayout('modal', 'HelloMessageDialog')
}

export function deactivate(env: Environment) {
  env.layouts.removeComponentFromLayout('modal', 'HelloMessageDialog')
  env.components.deleteClass(HelloMessageDialog)
}
```

> **Note:**
>
> The name passed to `addComponentToLayout` (and `removeComponentFromLayout`) must
> match the registered component's class name. If your bundler minifies class names,
> pass an explicit name so the lookup stays stable —
> `env.components.registerClass(HelloMessageDialog, 'HelloMessageDialog')` — and
> use that same string in the layout calls.

It produces:

![Example](https://developers.inkdrop.app/images/component-dialog_example.png)

## See also

- [Modal](https://developers.inkdrop.app/components/modal) — the lower-level overlay component that `Dialog` builds on.
- [The plugin tutorial](https://developers.inkdrop.app/guides/plugin-word-count#understanding-the-generated-code) that uses the `Dialog` component.