Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@leafygreen-ui/marketing-modal

Package Overview
Dependencies
Maintainers
6
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/marketing-modal

leafyGreen UI Kit Marketing Modal

  • 4.0.8-next.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
6
Created
Source

Marketing Modal

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/marketing-modal

NPM

npm install @leafygreen-ui/marketing-modal

Example

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <MarketingModal
        open={open}
        onButtonClick={() => setOpen(false)}
        onLinkClick={() => setOpen(false)}
        onClose={() => setOpen(false)}
        title="Introducing New Feature!"
        graphic={
          <img alt="" src="examples/DataLake.png" width={275} height={220} />
        }
        graphicStyle={ImageStyle.Center}
        buttonText="Okay"
        linkText="Cancel"
      >
        This is some description text, and it is extra long so it fills up this
        modal. Another thing about the modals here.
      </MarketingModal>
    </>
  );
}

Output HTML

<button>Open Modal</button>
<div aria-modal="true" role="dialog" tabindex="-1" class="leafygreen-ui-4ltwxx">
  <button
    tabindex="0"
    aria-disabled="false"
    aria-label="Close modal"
    class="leafygreen-ui-zndd6x"
  >
    <div class="leafygreen-ui-xhlipt">
      <svg
        class="leafygreen-ui-19fdo3o"
        height="20"
        width="20"
        viewBox="0 0 16 16"
        role="img"
      >
        <g
          id="X-Copy"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path
            d="M9,7 L13.5,7 L13.5,9 L9,9 L9,13.5 L7,13.5 L7,9 L2.5,9 L2.5,7 L7,7 L7,2.5 L9,2.5 L9,7 Z"
            id="Combined-Shape-Copy"
            fill="currentColor"
            transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
          ></path>
        </g>
      </svg>
    </div>
  </button>
  <div class="leafygreen-ui-ex1gyf">
    <img alt="" src="examples/DataLake.png" width="275" height="220" />
  </div>
  <div class="leafygreen-ui-8fcqkd">
    <div class="leafygreen-ui-1dhn1u9">Introducing New Feature!</div>
    This is some description text, and it is extra long so it fills up this
    modal. Another thing about the modals here.
  </div>
  <div class="leafygreen-ui-1xfya45">
    <button type="button" class="leafygreen-ui-1p9g0i2" aria-disabled="false">
      <span class="leafygreen-ui-1cpk24m">Okay</span></button
    ><span
      target="_blank"
      class="leafygreen-ui-1ouyicz"
      data-leafygreen-ui="anchor-container"
      tabindex="0"
      ><span class="leafygreen-ui-13nqixy">Cancel</span></span
    >
  </div>
</div>

Properties

| Prop | Type | Description | Default | | ---------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- | -------- | -------------------------------------------------- | --- | | open | boolean | Determines open state of Modal component | false | | onButtonClick | function | Callback that fires when the primary button is clicked. This can be used to set the modal to be closed. | () => {} | | onLinkClick | function | Callback that fires when the secondary link is clicked. This can be used to set the modal to be closed. | () => {} | | onClose | function | Callback that fires when the cancel button, x button, or backdrop is clicked. This can be used to set the modal to be closed. | () => {} | title | string | Title text to display above the main content text. | | | graphic | React.ReactElement | Element to be used as the main graphic of the modal. | | | graphicStyle | 'center', 'fill' | Determines how the main graphic should be displayed in the modal. | 'center' | | children | node | Children that will be rendered inside <ConfirmationModal /> component. | | | buttonText | string | Text content of the confirmation button. | | | linkText | string | Text content of the alternate action link. | | | className | string | Style to be applied to the container's root node. | | | darkMode | boolean | Determines if the component will appear in dark mode. | false | | closeIconColor | 'default', 'dark', 'light' | Determines the color of the close icon. | | showBlob | boolean | Determines if the blob illustration should appear in the background of the modal. Currently will only work if darkMode is set to false. | false | | blobPosition | 'top left', 'top right', 'bottom right' | Determines the position of the blob if showBlob is set to true. | top left |

FAQs

Package last updated on 25 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc