Merge pull request #71 from New-dev0/master

feat: Add SettingsButton

docs/interfaces/SettingsButtonProps.md

@@ -0,0 +1,27 @@
+[@vkruglikov/react-telegram-web-app](../README.md) / SettingsButtonProps
+
+# Interface: SettingsButtonProps
+
+The props type of [`SettingsButton`](../README.md#settingsbutton).
+
+## Table of contents
+
+### Properties
+
+- [onClick](SettingsButtonProps.md#onclick)
+
+## Properties
+
+### onClick
+
+• `Optional` **onClick**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+The settings button press event handler
+
+##### Returns
+
+`void`

src/SettingsButton.tsx

@@ -0,0 +1,34 @@
+import { useContext, useEffect, useId } from 'react';
+import { useWebApp, useSmoothButtonsTransition, systemContext } from './core';
+
+export interface SettingsButtonProps {
+  onClick?: () => void;
+}
+
+const SettingsButton = ({ onClick }: SettingsButtonProps): null => {
+  const system = useContext(systemContext);
+  const buttonId = useId();
+  const WebApp = useWebApp();
+
+  useEffect(() => {
+    if (!onClick || !WebApp?.SettingsButton) {
+      return;
+    }
+
+    WebApp.SettingsButton.onClick(onClick);
+    return () => {
+      WebApp.SettingsButton.offClick(onClick);
+    };
+  }, [onClick, WebApp]);
+
+  useSmoothButtonsTransition({
+    show: WebApp?.SettingsButton?.show,
+    hide: WebApp?.SettingsButton?.hide,
+    currentShowedIdRef: system.SettingsButton,
+    id: buttonId,
+  });
+
+  return null;
+};
+
+export default SettingsButton;

src/WebAppProvider.tsx

@@ -62,6 +62,7 @@ const WebAppProvider = ({
     const forceHideButtons = () => {
       globalWebApp?.MainButton?.hide();
       globalWebApp?.BackButton?.hide();
+      globalWebApp?.SettingsButton?.hide();
     };
 
     window.addEventListener('beforeunload', forceHideButtons);

src/core/context.ts

@@ -38,11 +38,13 @@ export const optionsContext = createContext<Options>(DEFAULT_OPTIONS);
 type SystemContext = {
   MainButton: MutableRefObject<null | string>;
   BackButton: MutableRefObject<null | string>;
+  SettingsButton: MutableRefObject<null | string>;
 };
 
 export const createSystemContextValue = () => ({
   MainButton: { current: null },
   BackButton: { current: null },
+  SettingsButton: { current: null },
 });
 
 export const systemContext = createContext<SystemContext>(

src/index.ts

@@ -1,5 +1,9 @@
 export { default as MainButton, MainButtonProps } from './MainButton';
 export { default as BackButton, BackButtonProps } from './BackButton';
+export {
+  default as SettingsButton,
+  SettingsButtonProps,
+} from './SettingsButton';
 export {
   default as useShowPopup,
   ShowPopupFunction,

src/useInitData.ts

@@ -21,7 +21,8 @@ export type WebAppUser = {
   last_name?: string;
   username?: string;
   language_code?: string;
-  photo_url?: true;
+  photo_url?: string;
+  is_premium?: boolean;
   added_to_attachment_menu?: true;
   allows_write_to_pm?: true;
 };