use-back-button.tsx

import { backButton, hapticFeedback } from "@telegram-apps/sdk-react";
import { useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";

interface BackButtonProps {
  customCallback?: () => void;
  enabled?: boolean;
}

export const useBackBtn = (props?: BackButtonProps) => {
  const { customCallback, enabled = true } = props || {};
  const navigate = useNavigate();
  const handleGoBack = useCallback(() => {
    hapticFeedback.impactOccurred("medium");
    navigate(-1);
  }, [navigate]);

  useEffect(() => {
    if (enabled) {
      backButton.show();
    }
    return () => {
      if (enabled) {
        backButton.hide();
      }
    };
  }, []);

  useEffect(() => {
    if (customCallback && enabled) {
      backButton.onClick(customCallback);
    } else {
      if (enabled) {
        backButton.onClick(handleGoBack);
      }
    }
    return () => {
      if (customCallback && enabled) {
        backButton.offClick(customCallback);
      } else {
        if (enabled) {
          backButton.offClick(handleGoBack);
        }
      }
    };
  }, [handleGoBack, customCallback]);
};