Skip to main content

onCancel

Description​

Fires on click of the Cancel button or when the ESC key is pressed

Usage​

onCancel?: (ev: { button?: string; ev: MouseEvent }) => void;

Parameters​

The callback of the event takes an object with the following parameter:

  • button - (optional) the value is "cancel" if the event fires on the Cancel button click
  • ev - the native MouseEvent of the click

The event also fires on pressing ESC, the callback function takes a native HTML event object.

Example​

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

export default function Example() {
  const [custom1, setCustom1] = useState<boolean | undefined>(true);

  function hideAll() {
    setCustom1(false);
  }

  return (
    <>
      {custom1 && (
        <Portal>
          <Modal title="Custom Prompt" onCancel={hideAll}>
            <Text select={true} focus={true} value="Some" />
          </Modal>
        </Portal>
      )}
    </>
  );
}

Related article: Providing the buttons' functionality

Related sample: Messages