import { Meta } from '@storybook/addon-docs';

<Meta title="Components/MediaModal/Codesandbox" />

# MediaModal

The MediaModal is a "light box" style container for presenting an image or video.

The default behavior of a Modal is to focus on the first focusable item.
Therefore, you should ensure that the first focusable item is non-destructive, such as a "cancel" or close button.

```js codesandbox=palmetto-components
import React, { useState } from 'react';
import {
  Button,
  MediaModal,
  useOpenClose,
} from '@palmetto/palmetto-components';

export default () => {
  const {
    isOpen: isMediaModalOpen,
    handleOpen: openMediaModal,
    handleClose: closeMediaModal,
  } = useOpenClose();
  return (
    <div>
      <Button variant="primary" tone="neutral" onClick={openMediaModal}>
        Show MediaModal
      </Button>
      <MediaModal
        ariaLabel="landscape photo"
        isOpen={isMediaModalOpen}
        onDismiss={closeMediaModal}
      >
        <img
          src="https://ux.palmetto.com/images/landscape-mediamodal.jpg"
          alt=""
          style={{
            objectFit: 'contain',
            maxHeight: '100vh',
          }}
        />
      </MediaModal>
    </div>
  );
};
```
