Welcome UI - Customizable design system with react

import * as React from 'react'
import { Modal, useModal } from '@welcome-ui/modal'
import { Button } from '@welcome-ui/button'

const Example = () => {
  const modal = useModal()

  return (
    <>
      <Modal.Trigger as={Button} store={modal}>
        Open modal
      </Modal.Trigger>
      <Modal ariaLabel="example" store={modal}>
        <Modal.Content store={modal}>
          <Modal.Body>
            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.Body>
        </Modal.Content>
      </Modal>
    </>
  )
}

export default Example

Installation

Run the following command:

yarn add @welcome-ui/modal

Import component:

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

Examples

Use useModal, Modal, Modal.Trigger and Modal.Body to create a simple Modal. To ensure good spacing between modal's sub-components, they must be wrapped with Modal.Content.

Sizes

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

Header and Footer

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

onClose

On Modal add onClose to have custom function called on modal close.

Without close button

On Modal.Content you can force not showing the close button with withClosingButton to false.

For our cases we need to show an item in a center of a modal, with specific Backdrop background color and a close button. It's a new sub component to the modal: AssetModal.

Image

Iframe

Title and Subtitle

Another variant with the AssetModal.AssetWithTitle component.

Swiper

Example with our <Swiper /> component.

Swiper and Title

Another example with AssetModal.AssetWithTitle.

We use useDialogStore from Ariakit Dialog for the state of the modal.

Pass options to useModal:

defaultOpen: e.g. const modal = useModal({ defaultOpen: true })
onClose: e.g. const modal = useModal({ onClose: () => console.log('closing the modal') })

And the hook returns (among other things):

useState('open'): whether the modal is currently open
hide: a function to hide the modal