import { Modal } from "wis/modal"

API Reference#

Name	Type	Default	Description
title	string	none	Modal header text, displayed at the top of the module.
description	string	none	Modal description text, displayed in the drawer header.
toggleTip	ReactNode	none	The toggle tip.
width	number	none	Set the modal width.
height	number	none	Set the modal height.
closeable	boolean	true	Set whether to display the close icon in the Modal.
maskCloseable	boolean	true	Enable closing the Modal by clicking the overlay mask.
modal	boolean	true	Configure whether the popup is in modal mode.
open	boolean	none	Controlled open state of the Modal. Must be used with onOpen.
defaultOpen	boolean	none	Initial open state of the Modal when first rendered.
onOpen	(open: boolean) => void	none	Event handler called when the Modal's open state changes.

Method#

import { useRef } from "react"
import { Modal, type ModalRef } from "wis/modal"
import { Button } from "wis/button"
 
function () {
  const modal = useRef<ModalRef>(null);
 
  return (
    <>
      <Button text="Open" onClick={() => modal.current?.show()} />
      <Modal ref={modal} title="Modal Title" />
    </>
  )
}

Type Definition

interface ModalRef {
  show: () => void;
  hide: () => void;
}

show(): void#

show Modal

hide(): void#

hide Modal