Overlay

Description

The Overlay a component to be able to display html content. It will be shown inside the website via a dialog that opens and can be closed.

Component

Properties

• Inherits all properties from <dialog> component
• dialog : accept the object returned by the hook useDialog

Implementation example

import { Overlay, useDialog } from '@tmdxp/@tmedxp/dxp-headless-components';

const Foo = () => {
  const dialog = useDialog({
    id: 'overlay',
    isModal: true,
  });

  return (
    <>
      <button
        onClick={() => {
          dialog.openOverlay();
        }}
      />
      <Overlay dialog={dialog}>
        <iframe title="example" src={'https://www.example.com'} />
      </Overlay>
    </>
  );
};

export { Foo };

Storybook

https://stunning-adventure-o796gr1.pages.github.io/?path=/story/ux-library-atoms-overlay—base