@leafygreen-ui/modal
LeafyGreen UI Kit Modal
Last updated 2 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/modal 
SYNC missed versions from official npm registry.

Modal

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/modal

NPM

npm install @leafygreen-ui/modal

Example

import Modal from '@leafygreen-ui/modal';

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

  return (
    <>
      <button onClick={() => setOpen(curr => !curr)}>Open Modal</button>
      <Modal open={open} setOpen={setOpen}>
        Modal Content goes here.
      </Modal>
    </>
  );
}

Output HTML

<button>Open Modal</button>
<div aria-modal="true" role="dialog" tabindex="-1" class="leafygreen-ui-2e4yhj">
  <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
  >Modal Content goes here.
</div>

Properties

Prop Type Description Default
open boolean Determines open state of Modal component false
setOpen function Callback to set open state of Modal component. setOpen accepts a boolean value, which will determine the open state of Modal component. () => {}
size 'small' | 'default' | 'large' Determines Modal size. 'default'
shouldClose function Callback to determine whether or not Modal should close when user tries to close it. () => true
children node Children that will be rendered inside <Modal /> component.
className string Style to be applied to the container's root node.
contentClassName string Style to be applied to the content div.
closeOnBackdropClick boolean Determines whether or not a Modal should close when a user clicks outside the modal. true

Current Tags

  • 5.1.0                                ...           latest (2 months ago)

27 Versions

  • 5.1.0                                ...           2 months ago
  • 5.0.1                                ...           3 months ago
  • 5.0.0                                ...           3 months ago
  • 4.1.1                                ...           4 months ago
  • 4.1.0                                ...           5 months ago
  • 4.0.0                                ...           5 months ago
  • 3.1.5                                ...           5 months ago
  • 3.1.4                                ...           5 months ago
  • 3.1.3                                ...           6 months ago
  • 3.1.2                                ...           7 months ago
  • 3.1.1                                ...           7 months ago
  • 3.1.0                                ...           7 months ago
  • 3.0.6                                ...           7 months ago
  • 3.0.5                                ...           8 months ago
  • 3.0.4                                ...           9 months ago
  • 3.0.3                                ...           10 months ago
  • 3.0.2                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 29
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |