Modal

Allows user to show a component ahead the page, to take an action from it.

version

4.2.0

install

yarn add @welcome-ui/modal

usage

import { Modal } from '@welcome-ui/modal'

View package View source

About #

Modal from Reakit with a really nice theme 👀

Usage #

Use useModalState, Modal, Modal.Trigger and <Modal.Content /> to create a simple Modal.


function() {
  const modal = useModalState()

  return (
    <>
      <Modal.Trigger as={Button} {...modal}>
        Open modal
      </Modal.Trigger>
      <Modal {...modal} ariaLabel="example">
        <Modal.Content>
          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.
        </Modal.Content>
      </Modal>
    </>
  )
}

Sizes #

By default size is set to lg. If you don't want a size (fit on content), set size to auto.


function() {
  const modal = useModalState()
  const [size, setSize] = React.useState()

  return (
    <Stack direction="row">
      <Modal.Trigger as={Button} {...modal} onClick={() => setSize('sm')}>
        sm
      </Modal.Trigger>
      <Modal.Trigger as={Button} {...modal} onClick={() => setSize('md')}>
        md
      </Modal.Trigger>
      <Modal.Trigger as={Button} {...modal} onClick={() => setSize('lg')}>
        lg
      </Modal.Trigger>
      <Modal.Trigger as={Button} {...modal} onClick={() => setSize('auto')}>
        auto
      </Modal.Trigger>
      <Modal {...modal} size={size} ariaLabel="size example">
        <Modal.Content>
          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.
        </Modal.Content>
      </Modal>
    </Stack>
  )
}

Header and Footer #

Use Modal.Title and Modal.Footer to style your Modal.


function() {
  const modal = useModalState()

  return (
    <>
      <Modal.Trigger as={Button} {...modal}>
        Open modal
      </Modal.Trigger>
      <Modal {...modal} ariaLabel="example">
        <Modal.Title>
          Nullam non lacinia
        </Modal.Title>
        <Modal.Content>
          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.

          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.

          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.
        </Modal.Content>
        <Modal.Footer>
          <Box w="100%" display="flex" justifyContent="space-between">
            <Button variant="secondary">Lorem dolir</Button>
            <Button onClick={() => modal.hide()}>Close</Button>
          </Box>
        </Modal.Footer>
      </Modal>
    </>
  )
}

Cover #

Use Modal.Cover to style your Modal.


function() {
  const modal = useModalState()

  return (
    <>
      <Modal.Trigger as={Button} {...modal}>
        Open modal
      </Modal.Trigger>
      <Modal {...modal} ariaLabel="example">
        <Modal.Cover w="100%" h={200}>
          <img src="https://m.media-amazon.com/images/M/MV5BMzE0NzgyODIxN15BMl5BanBnXkFtZTgwNDU0NjU5NzE@._V1_SX1777_CR0,0,1777,994_AL_.jpg" />
        </Modal.Cover>
        <Modal.Content>
          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
          nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque,
          felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
          eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
          orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
          In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
          quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
          ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.
        </Modal.Content>
      </Modal>
    </>
  )
}