GA-MO / react-confirm-alert

react component confirm dialog.
https://ga-mo.github.io/react-confirm-alert/demo/
MIT License
271 stars 105 forks source link

customUI Typescript error after upgrading from 2.8.0 to 3.0.1 #76

Closed Shaker-Hamdi closed 2 years ago

Shaker-Hamdi commented 2 years ago

After upgrading from 2.8.0 to 3.0.1, I got this typescript error in my customUI ...

Argument of type '{ customUI: ({ onClose }: { title: string; message: string; onClose: () => void; }) => Element; }' is not assignable to parameter of type 'ReactConfirmAlertProps'.
  Type '{ customUI: ({ onClose }: { title: string; message: string; onClose: () => void; }) => Element; }' is missing the following properties from type 'ReactConfirmAlertProps': targetId, keyCodeForClose

I added both properties (targetId, keyCodeForClose) after the customUI property and the error went away. However, the issue is that I don't know what I am supposed to write as a value for "targetId", and I couldn't find it in the documentation either.

Here's my component so far ...

confirmAlert({
  customUI: ({ onClose }) => {
    return (
      <div className="custom-ui">
        <h2>Are you sure?</h2>
        <p>Are you sure you want to delete this?</p>

        <div className="cta">
          <button className="cancel" onClick={onClose}>
            Cancel
          </button>
          <button
            className="confirm red"
            onClick={() => {
              console.log("Clicked Confirm");
              onClose();
            }}
          >
            Yes, Delete it!
          </button>
        </div>
      </div>
    );
  },
  targetId: "???",
  keyCodeForClose: [8, 32],
});
GA-MO commented 2 years ago

@Shaker-Hamdi Fixed in version 3.0.2