ohif-viewer/platform/ui/src/contextProviders/ViewportDialogProvider.mdx

---
name: ViewportDialogProvider
route: customHooks/viewportDialogProvider
---

import { Playground, Props } from 'docz';

<!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
import { UIViewportDialogService, ServicesManager } from './../../../core/src/services';

import {
  ViewportDialogProvider,
  Dialog,
  Button,
  useViewportDialog,
  Notification,
} from '@ohif/ui';

# Viewport Dialog Provider

This is a context provider that allow the application to share the modal
component across all application.

## Sample

<Playground>
  {() => {
    const ViewportNotification = ({ hide }) => {
      return (
        <Notification
          text="Track all measurement for this series?"
          type="info"
          actionButtons={
            <div>
              <Button onClick={hide}>No</Button>
              <Button onClick={hide} className="ml-2">
                No, do not ask again
              </Button>
              <Button onClick={hide} className="ml-2" color="primary">
                Yes
              </Button>
            </div>
          }
        />
      );
    };
    const ViewportActionButtons = () => {
      const dialog = useViewportDialog();
      return (
        <Button
          onClick={() =>
            dialog.show({
              content: ViewportNotification,
            })
          }
        >
          Open Dialog
        </Button>
      );
    };
    return (
      <div className="w-full flex flex-row p-4" style={{height: '400px'}}>
        <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">
          <ViewportDialogProvider dialog={Dialog}>
            <div className="flex flex-1 flex-col items-center justify-center h-full">
              <ViewportActionButtons />
              <span>CONTENT 1</span>
            </div>
          </ViewportDialogProvider>
        </div>
        <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">
          <ViewportDialogProvider dialog={Dialog}>
            <div className="flex flex-1 flex-col items-center justify-center h-full">
              <ViewportActionButtons />
              <span>CONTENT 1</span>
            </div>
          </ViewportDialogProvider>
        </div>
      </div>
    );
  }}
</Playground>

## Example using UIViewportDialogService

<Playground>
  {() => {
    const ViewportNotification = ({ hide }) => {
      return (
        <Notification
          text="Track all measurement for this series?"
          type="info"
          actionButtons={
            <div>
              <Button onClick={hide}>No</Button>
              <Button className="ml-2">No, do not ask again</Button>
              <Button className="ml-2" color="primary">
                Yes
              </Button>
            </div>
          }
        />
      );
    };
    // Creating servicesManager and register services should be in the root of your app
    const servicesManager = new ServicesManager();
    servicesManager.registerServices([UIViewportDialogService]);
    // Get service instance
    const _UIViewportDialogService =
      servicesManager.services.UIViewportDialogService;
    return (
      <div className="w-full flex flex-col p-4" style={{height: '400px'}}>
        <div className="flex flex-2">
          <Button
            className="mr-4 mb-4"
            onClick={() =>
              _UIViewportDialogService.show({
                content: ViewportNotification,
                viewportIndex: 0,
              })
            }
          >
            Open dialog on 0
          </Button>
          <Button
            className="mr-4 mb-4"
            onClick={() =>
              _UIViewportDialogService.show({
                content: ViewportNotification,
                viewportIndex: 1,
              })
            }
          >
            Open dialog on 1
          </Button>
        </div>
        <div className="flex flex-1 w-full flex-row">
          <ViewportDialogProvider
            dialog={Dialog}
            service={_UIViewportDialogService}
            viewportIndex={0}
          >
            <div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
              CONTENT 0
            </div>
          </ViewportDialogProvider>
          <ViewportDialogProvider
            dialog={Dialog}
            service={_UIViewportDialogService}
            viewportIndex={1}
          >
            <div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
              CONTENT 1
            </div>
          </ViewportDialogProvider>
        </div>
      </div>
    );
  }}
</Playground>


## Properties:

<Props of={ViewportDialogProvider} />