@vetc-miniapp/ui-react 0.0.11 → 0.0.13

package/README.md

@@ -5,21 +5,98 @@ SDK giúp Mini App giao tiếp với Super App host thông qua JS Bridge.
 ## Cài đặt
 
 ```bash
-npm install @yourcompany/miniapp-sdk
+npm install @vetc-miniapp/ui-react
 ```
 ## Sử dụng
+# useNavigate – Điều hướng Mini App qua Native (Flutter)
 
-import MiniApp from "@vetc/miniapp-sdk";
+`useNavigate` là hook dùng trong **mini app React** để điều hướng **thông qua host app (Flutter)**, thay vì tự điều hướng nội bộ bằng `react-router-dom`.
 
-MiniApp.getScopedToken().then(console.log);
+Hook này giúp:
 
-MiniApp.pickImage({ source: "camera" }).then(console.log);
+- Mini app **không phụ thuộc URL thực**
+- Toàn bộ navigation được **native kiểm soát**
+- **Đồng bộ header, back stack, animation** giữa mini app & app chính
 
-MiniApp.on("TOKEN_REFRESH", data => {
-  console.log("Token updated:", data);
+---
+
+## 📦 Import
+
+```ts
+import { useNavigate } from '@vetc-miniapp/ui-react';
+
+const navigate = useNavigate();
+
+navigate(
+  path: string,
+  title: string,
+  params?: Record<string, any>,
+  options?: {
+    replace?: boolean;
+    popTo?: string;
+  }
+): void
+
+```
+
+## 🚀 Cách sử dụng cơ bản
+# Điều hướng sang page khác
+```ts
+const navigate = useNavigate();
+
+<button onClick={() => navigate('/about', { title: "About", params: {}})}>
+  Go to About
+</button>
+
+Truyền params
+navigate('/vehicle-detail', {
+  title: "About",
+  params: {
+    id: 'abc123',
+    source: 'homepage',
+  }
 });
+```
 
-npm run build
-npm publish --access public
+# ➡ Flutter sẽ nhận được URL dạng:
 
+/miniapp/vehicle-detail?id=abc123&source=homepage
 
+## 🔁 Replace route (không giữ back stack)
+```
+navigate('/login', { mode: 'replace' });
+
+
+navigate('/home', { popTo: '/home' });
+```
+## 🧩 Ví dụ đầy đủ trong Component
+```
+
+import { useNavigate } from '@vetc-miniapp/ui-react';
+
+function VehicleItem({ vehicle }) {
+  const navigate = useNavigate();
+
+  return (
+    <div onClick={() => navigate('/vehicle-detail', { title: "Chi tiết xe"}, { mode: "replace" })}>
+      {vehicle.name}
+    </div>
+  );
+}
+```
+
+## ⚠️ Lưu ý quan trọng
+# ❌ Không dùng react-router-dom
+```
+
+// KHÔNG dùng
+import { useNavigate } from 'react-router-dom';
+
+
+Mini app không quản lý history nội bộ.
+```
+
+# ❌ Không dùng window.location
+```
+window.location.href = '/about'; // ❌
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "MiniApp Platform UI React",
   "main": "src/ui-react/index.js",
   "types": "src/ui-react/index.ts",

package/src/dist/ui-react/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=r(require("react")):e["vetc-miniapp/ui-react"]=r(e.react)}(this,e=>(()=>{"use strict";var r={155(r){r.exports=e},698(e,r){var t=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function o(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var i in n={},r)"key"!==i&&(n[i]=r[i]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}r.Fragment=n,r.jsx=o,r.jsxs=o},848(e,r,t){e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,n),i.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};n.r(o),n.d(o,{App:()=>m,appConfig:()=>u,getCurrentPage:()=>y,initRouter:()=>v,setCurrentPath:()=>g,useNavigate:()=>l});var i="undefined"!=typeof window,a=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=i&&window.flutter_inappwebview?window.flutter_inappwebview:null;return t?t.callHandler("MiniAppBridge",{action:e,payload:r}):Promise.reject(new Error("MiniApp bridge not available"))};function l(){return function(e){a("navigate",{type:"native",route:e,params:arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},options:arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}})}}var u={locale:"vi",theme:"light",pages:[]},c=n(155),f=n(848);function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}var s=new Map,d="/";function v(e){console.log(e),s=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(s)}function y(){return s.get(d)}function g(e){d=e}function m(e){var r,t,n=e.config,o=e.children,i=(r=(0,c.useState)(null),t=2,function(e){if(Array.isArray(e))return e}(r)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,i,a,l=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=i.call(t)).done)&&(l.push(n.value),l.length!==r);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return l}}(r,t)||function(e,r){if(e){if("string"==typeof e)return p(e,r);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?p(e,r):void 0}}(r,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),l=i[0],u=i[1];(0,c.useEffect)(function(){var e;if(console.warn("SDK useEffect fired"),null!=n&&null!==(e=n.pages)&&void 0!==e&&e.length){v(n),console.warn(n),g((window.location.path||"/").replace("/miniapp","")||"/");var r=y();console.warn(r),r||(g("/"),r=y()),u(r),a("registerAppConfig",{config:n})}},[n]),console.warn("SDK fired"),l&&l.Component||console.warn("MiniApp: Page not found for current route");var s=l.Component||(0,f.jsx)("div",{});return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(s,{}),o]})}return o})());
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=n(require("react")):e["vetc-miniapp/ui-react"]=n(e.react)}(this,e=>(()=>{"use strict";var n={155(n){n.exports=e},698(e,n){var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(e,n,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==n.key&&(o=""+n.key),"key"in n)for(var i in t={},n)"key"!==i&&(t[i]=n[i]);else t=n;return n=t.ref,{$$typeof:r,type:e,key:o,ref:void 0!==n?n:null,props:t}}n.Fragment=t,n.jsx=o,n.jsxs=o},848(e,n,r){e.exports=r(698)}},r={};function t(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{App:()=>O,appConfig:()=>m,getCurrentPage:()=>S,initRouter:()=>M,setCurrentPath:()=>x,useAppPause:()=>a,useAppResume:()=>c,useDidHide:()=>p,useDidShow:()=>f,useNavigate:()=>g});var i=t(155),u=t.n(i);function a(e){var n=(0,i.useRef)(e);(0,i.useEffect)(function(){n.current=e},[e]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var e=function(){try{n.current&&n.current()}catch(e){console.error("[useAppPause error]",e)}};return window.MiniApp.on("appPause",e),function(){window.MiniApp.off("appPause",e)}}},[])}function c(e){var n=(0,i.useRef)(e);(0,i.useEffect)(function(){n.current=e},[e]),(0,i.useEffect)(function(){if(console.warn("MiniApp: useAppResume"),console.warn(window.MiniApp),"undefined"!=typeof window&&window.MiniApp){var e=function(){try{n.current&&n.current()}catch(e){console.error("[useAppResume error]",e)}};return window.MiniApp.on("appResume",e),function(){window.MiniApp.off("appResume",e)}}},[])}function f(e,n){var r=(0,i.useRef)(n);(0,i.useEffect)(function(){r.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var t;(null==n?void 0:n.pathname)===e&&(null===(t=r.current)||void 0===t||t.call(r,n))};return window.MiniApp.on("didShow",n),function(){window.MiniApp.off("didShow",n)}}},[e])}function p(e,n){var r=(0,i.useRef)(n);(0,i.useEffect)(function(){r.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var t;(null==n?void 0:n.pathname)===e&&(null===(t=r.current)||void 0===t||t.call(r,n))};return window.MiniApp.on("didHide",n),function(){window.MiniApp.off("didHide",n)}}},[e])}function l(){var e,n,r="function"==typeof Symbol?Symbol:{},t=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,t,o,i){var c=t&&t.prototype instanceof a?t:a,f=Object.create(c.prototype);return s(f,"_invoke",function(r,t,o){var i,a,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(n,r){return i=n,a=0,c=e,s.n=r,u}};function d(r,t){for(a=r,c=t,n=0;!l&&f&&!o&&n<p.length;n++){var o,i=p[n],d=s.p,v=i[2];r>3?(o=v===t)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,s.v=t,s.n=i[1]):d<v&&(o=r<3||i[0]>t||t>v)&&(i[4]=r,i[5]=t,s.n=v,a=0))}if(o||r>1)return u;throw l=!0,t}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,v),a=p,c=v;(n=a<2?e:c)||!l;){i||(a?a<3?(a>1&&(s.n=-1),d(a,c)):s.n=c:s.v=c);try{if(f=2,i){if(a||(o="next"),n=i[o]){if(!(n=n.call(i,c)))throw TypeError("iterator result is not an object");if(!n.done)return n;c=n.value,a<2&&(a=0)}else 1===a&&(n=i.return)&&n.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((n=(l=s.n<0)?c:r.call(t,s))!==u)break}catch(n){i=e,a=1,c=n}finally{f=1}}return{value:n,done:l}}}(r,o,i),!0),f}var u={};function a(){}function c(){}function f(){}n=Object.getPrototypeOf;var p=[][t]?n(n([][t]())):(s(n={},t,function(){return this}),n),d=f.prototype=a.prototype=Object.create(p);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,f):(e.__proto__=f,s(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return c.prototype=f,s(d,"constructor",f),s(f,"constructor",c),c.displayName="GeneratorFunction",s(f,o,"GeneratorFunction"),s(d),s(d,o,"Generator"),s(d,t,function(){return this}),s(d,"toString",function(){return"[object Generator]"}),(l=function(){return{w:i,m:v}})()}function s(e,n,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}s=function(e,n,r,t){function i(n,r){s(e,n,function(e){return this._invoke(n,r,e)})}n?o?o(e,n,{value:r,enumerable:!t,configurable:!t,writable:!t}):e[n]=r:(i("next",0),i("throw",1),i("return",2))},s(e,n,r,t)}function d(e,n,r,t,o,i,u){try{var a=e[i](u),c=a.value}catch(e){return void r(e)}a.done?n(c):Promise.resolve(c).then(t,o)}var v="undefined"!=typeof window,y=function(){return v&&window.flutter_inappwebview?window.flutter_inappwebview:null},w=function(){var e,n=(e=l().m(function e(n){var r,t,o,i,u=arguments;return l().w(function(e){for(;;)switch(e.p=e.n){case 0:if(r=u.length>1&&void 0!==u[1]?u[1]:{},t=y()){e.n=1;break}return e.a(2,Promise.reject(new Error("MiniApp bridge not available")));case 1:return e.p=1,e.n=2,t.callHandler("MiniAppBridge",{action:n,payload:r});case 2:return o=e.v,e.a(2,o);case 3:throw e.p=3,i=e.v,console.error("Bridge error:",i),i;case 4:return e.a(2)}},e,null,[[1,3]])}),function(){var n=this,r=arguments;return new Promise(function(t,o){var i=e.apply(n,r);function u(e){d(i,t,o,u,a,"next",e)}function a(e){d(i,t,o,u,a,"throw",e)}u(void 0)})});return function(e){return n.apply(this,arguments)}}();function g(){return function(e){w("navigate",{type:"native",route:e,params:arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},options:arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}})}}var m={locale:"vi",theme:"light",pages:[]},h=t(848);function b(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}var A=new Map,j="/";function M(e){console.log(e),A=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(A)}function S(){return A.get(j)}function x(e){j=e}function O(e){var n,r,t=e.config,o=e.children,u=(n=(0,i.useState)(null),r=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,i,u,a=[],c=!0,f=!1;try{if(i=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(a.push(t.value),a.length!==n);c=!0);}catch(e){f=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(n,r)||function(e,n){if(e){if("string"==typeof e)return b(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,n):void 0}}(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=u[0],c=u[1];if((0,i.useEffect)(function(){var e;if(null!=t&&null!==(e=t.pages)&&void 0!==e&&e.length){M(t);var n=window.location.pathname||"/",r=n.replace("/miniapp","")||"/";console.log(n),x(r);var o=S();console.warn(o),o||(x("/"),o=S()),c(o),w("registerAppConfig",{config:t})}},[t]),!a||!a.Component)return console.warn("MiniApp: Page not found for current route"),(0,h.jsx)(h.Fragment,{children:(0,h.jsx)("div",{})});var f=a.Component||(0,h.jsx)("div",{});return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{}),o]})}return console.log("SDK React object:",u()),o})());

package/src/dist/ui-react/index.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+
 /**
  * @license React
  * react-jsx-runtime.production.js

package/src/ui-react/hooks/use-app-pause.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useAppPause
+ *
+ * Trigger khi Native App đi vào background.
+ */
+export function useAppPause(callback) {
+  const savedCallback = useRef(callback);
+
+  // Luôn giữ callback mới nhất
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = () => {
+      try {
+        if (savedCallback.current) {
+          savedCallback.current();
+        }
+      } catch (err) {
+        console.error("[useAppPause error]", err);
+      }
+    };
+
+    window.MiniApp.on("appPause", handler);
+
+    return () => {
+      window.MiniApp.off("appPause", handler);
+    };
+  }, []);
+}

package/src/ui-react/hooks/use-app-pause.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useAppPause
+ *
+ * Trigger khi Native App đi vào background.
+ */
+export function useAppPause(callback: () => void) {
+  const savedCallback = useRef(callback);
+
+  // giữ callback luôn mới nhất
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = () => {
+      try {
+        savedCallback.current?.();
+      } catch (err) {
+        console.error("[useAppPause error]", err);
+      }
+    };
+
+    window.MiniApp.on("appPause", handler);
+
+    return () => {
+      window.MiniApp.off("appPause", handler);
+    };
+  }, []);
+}

package/src/ui-react/hooks/use-app-resume.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useAppResume
+ *
+ * Trigger khi Native App quay lại foreground.
+ */
+export function useAppResume(callback) {
+  const savedCallback = useRef(callback);
+
+  // Cập nhật callback mới nhất
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    console.warn("MiniApp: useAppResume");
+    console.warn(window.MiniApp);
+
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = () => {
+      try {
+        if (savedCallback.current) {
+          savedCallback.current();
+        }
+      } catch (err) {
+        console.error("[useAppResume error]", err);
+      }
+    };
+
+    window.MiniApp.on("appResume", handler);
+
+    return () => {
+      window.MiniApp.off("appResume", handler);
+    };
+  }, []);
+}

package/src/ui-react/hooks/use-app-resume.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useAppResume
+ *
+ * Trigger khi Native App quay lại foreground.
+ */
+export function useAppResume(callback: () => void) {
+  const savedCallback = useRef(callback);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = () => {
+      try {
+        savedCallback.current?.();
+      } catch (err) {
+        console.error("[useAppResume error]", err);
+      }
+    };
+
+    window.MiniApp.on("appResume", handler);
+
+    return () => {
+      window.MiniApp.off("appResume", handler);
+    };
+  }, []);
+}

package/src/ui-react/hooks/use-did-hide.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+
+export function useDidHide(pathname, callback) {
+  const saved = useRef(callback);
+
+  useEffect(() => {
+    saved.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (!window.MiniApp) return;
+
+    const handler = (data) => {
+      if (data?.pathname === pathname) {
+        saved.current?.(data);
+      }
+    };
+
+    window.MiniApp.on("didHide", handler);
+
+    return () => {
+      window.MiniApp.off("didHide", handler);
+    };
+  }, [pathname]);
+}

package/src/ui-react/hooks/use-did-hide.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+type DidHidePayload = {
+  pathname?: string;
+  [key: string]: any;
+};
+
+export function useDidHide(
+  pathname: string,
+  callback: (data?: DidHidePayload) => void
+): void {
+  const saved = useRef(callback);
+
+  // luôn giữ callback mới nhất
+  useEffect(() => {
+    saved.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = (data?: DidHidePayload) => {
+      if (data?.pathname === pathname) {
+        saved.current?.(data);
+      }
+    };
+
+    window.MiniApp.on("didHide", handler);
+
+    return () => {
+      window.MiniApp.off("didHide", handler);
+    };
+  }, [pathname]);
+}

package/src/ui-react/hooks/use-did-show.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+
+export function useDidShow(pathname, callback) {
+  const saved = useRef(callback);
+
+  useEffect(() => {
+    saved.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (!window.MiniApp) return;
+
+    const handler = (data) => {
+      if (data?.pathname === pathname) {
+        saved.current?.(data);
+      }
+    };
+
+    window.MiniApp.on("didShow", handler);
+
+    return () => {
+      window.MiniApp.off("didShow", handler);
+    };
+  }, [pathname]);
+}

package/src/ui-react/hooks/use-did-show.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+type DidShowPayload = {
+  pathname?: string;
+  [key: string]: any;
+};
+
+export function useDidShow(
+  pathname: string,
+  callback: (data?: DidShowPayload) => void
+): void {
+  const saved = useRef(callback);
+
+  // luôn giữ callback mới nhất
+  useEffect(() => {
+    saved.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.MiniApp) return;
+
+    const handler = (data?: DidShowPayload) => {
+      if (data?.pathname === pathname) {
+        saved.current?.(data);
+      }
+    };
+
+    window.MiniApp.on("didShow", handler);
+
+    return () => {
+      window.MiniApp.off("didShow", handler);
+    };
+  }, [pathname]);
+}

package/src/ui-react/index.js

@@ -1,3 +1,7 @@
+export * from './hooks/use-app-pause.js';
+export * from './hooks/use-app-resume.js';
+export * from './hooks/use-did-show.js';
+export * from './hooks/use-did-hide.js';
 export * from './hooks/use-navigate.js';
 export * from './hooks/use-app-state.js';
 export * from './components/app.jsx';

package/src/ui-react/index.ts

@@ -1,3 +1,7 @@
+export * from './hooks/use-app-resume';
+export * from './hooks/use-app-pause';
+export * from './hooks/use-did-show';
+export * from './hooks/use-did-hide';
 export * from './hooks/use-navigate';
 export * from './hooks/use-app-state';
 // export * from './components/app';