HardwareBackButton type


in your docs it says to use this code

document.addEventListener('ionBackButton', (ev) => {
  ev.detail.register(10, () => {
    console.log('Handler was called!');

to register new events to the HardwareBackButton.

But I do get some type errors:

Type ‘BackButtonEvent’ does not satisfy the constraint ‘keyof DocumentEventMap’

I figured that I need create new file > dom.d.ts inside my types folder and add this code:


import { BackButtonEventDetail } from "@ionic/core";

interface CustomEventMap {
  ionBackButton: CustomEvent<BackButtonEventDetail>;
declare global {
  interface Document {
    addEventListener<K extends keyof CustomEventMap>(
      type: K,
      listener: (this: Document, ev: CustomEventMap[K]) => void
    ): void;
export {};

Now, when I write:

 useEffect(() => {
    document.addEventListener("ionBackButton", (e) => {
      e.detail.register(10, () => {
        //handle some stuff
  }, []);

i don’t have any type errors and ionBackButton is inside document.

I think the whole react community will appreciate if you could fix that so we won’t have to add this code in every project or use App.addListener.