Skip to main content

onCancel

Description​

Sets the function that closes a popup

Usage​

onCancel?: (ev: MouseEvent) => void;

Parameters​

  • ev - the event object associated with the cancel action

Example​

import { useState } from "react";
import { Button, Popup } from "@svar-ui/react-core";

function Example() {
  const [showPopup, setShowPopup] = useState(false);

  function onClick() {
    setShowPopup(true);
  }

  function oncancel(ev: MouseEvent) {
    setShowPopup(false);
  }

  return (
    <div>
      <Button onClick={onClick}>Show Popup</Button>

      {showPopup && (
        <Popup onClick={onClick} onCancel={oncancel}>
          <div className="popup">
            <p>Some text here and there</p>
          </div>
        </Popup>
      )}
    </div>
  );
}

Related article: Showing/hiding Popup

Related sample: Popup