Added docs and demo, describes work useScanQrPopup hook

README.md

@@ -7,6 +7,12 @@ React components for Telegram WebApp
 [![GitHub Actions CI](https://github.com/vkruglikov/react-telegram-web-app/actions/workflows/release.yml/badge.svg)](https://github.com/vkruglikov/react-telegram-web-app/actions/workflows/release.yml)
 [![License](https://badgen.net/github/license/vkruglikov/react-telegram-web-app)](https://github.com/vkruglikov/react-telegram-web-app/blob/master/LICENSE)
 
+## 🔴 Live Demo & Code Examples
+
+You can try open demo telegram bot with React WebApp [@react_telegram_web_app_bot](https://t.me/react_telegram_web_app_bot).
+
+Also, you can look demo [source code](./demo/src).
+
 ## 🔧 Installation & Get started
 
 1️⃣ **Foremost**, you have to do [initializing web apps](https://core.telegram.org/bots/webapps#initializing-web-apps) step, because package has dependency of Telegram Web App context.
@@ -50,6 +56,8 @@ const App = () => {
   This hook that provided `impactOccurred`, `notificationOccurred` and `selectionChanged` functions that controls haptic feedback.
 - [useThemeParams](./docs/README.md#usethemeparams) -
   This hook that provided `colorScheme` and `themeParams` object.
+- [useScanQrPopup](./docs/README.md#usescanqrpopup) -
+  This hook that provided `showScanQrPopup` and `closeScanQrPopup` functions.
 
 ## 🛣 Roadmap
 
@@ -59,12 +67,6 @@ Here's what's coming up:
 - [ ] All Telegram WebApp feature support.
 - [x] Main Telegram WebApp feature support.
 
-## 🔴 Live Demo & Code Examples
-
-You can try open demo telegram bot with React WebApp [@react_telegram_web_app_bot](https://t.me/react_telegram_web_app_bot).
-
-Also, you can look demo [source code](./demo/src).
-
 ## 🥂 License
 
 [MIT](./LICENSE)

demo/package.json

@@ -6,7 +6,7 @@
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vkruglikov/react-telegram-web-app": "^1.6.0",
+    "@vkruglikov/react-telegram-web-app": "^1.7.0",
     "antd": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

demo/src/ScanQrPopupDemo.tsx

@@ -0,0 +1,47 @@
+import { Button, Form, Typography } from 'antd';
+import {
+  useScanQrPopup,
+  useShowPopup,
+} from '@vkruglikov/react-telegram-web-app';
+
+const ScanQrPopupDemo = () => {
+  const [showQrPopup, closeQrPopup] = useScanQrPopup();
+  const showPopup = useShowPopup();
+
+  return (
+    <>
+      <Typography.Title level={3}>useScanQrPopup</Typography.Title>
+      <Form
+        labelCol={{ span: 6 }}
+        name="basic"
+        layout="horizontal"
+        autoComplete="off"
+      >
+        <Form.Item>
+          <Button
+            block
+            type="primary"
+            htmlType="button"
+            onClick={() =>
+              showQrPopup(
+                {
+                  text: 'Привет друг',
+                },
+                text => {
+                  closeQrPopup();
+                  showPopup({
+                    message: text,
+                  });
+                },
+              )
+            }
+          >
+            showScanQrPopup
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default ScanQrPopupDemo;

demo/src/index.tsx

@@ -11,6 +11,7 @@ import MainButtonDemo from './MainButtonDemo';
 import BackButtonDemo from './BackButtonDemo';
 import ShowPopupDemo from './ShowPopupDemo';
 import HapticFeedbackDemo from './HapticFeedbackDemo';
+import ScanQrPopupDemo from './ScanQrPopupDemo';
 
 const DemoApp = () => {
   const [colorScheme, themeParams] = useThemeParams();
@@ -42,6 +43,7 @@ const DemoApp = () => {
           <BackButtonDemo />
           <ShowPopupDemo />
           <HapticFeedbackDemo />
+          <ScanQrPopupDemo />
         </div>
       </ConfigProvider>
     </div>

docs/README.md

@@ -8,17 +8,21 @@
 
 - [BackButtonProps](interfaces/BackButtonProps.md)
 - [MainButtonProps](interfaces/MainButtonProps.md)
+- [ScanQrPopupParams](interfaces/ScanQrPopupParams.md)
 - [ShowPopupButton](interfaces/ShowPopupButton.md)
 - [ShowPopupParams](interfaces/ShowPopupParams.md)
 - [ThemeParams](interfaces/ThemeParams.md)
 
 ### Type Aliases
 
+- [CloseScanQrPopupFunction](README.md#closescanqrpopupfunction)
 - [ColorScheme](README.md#colorscheme)
 - [ImpactOccurredFunction](README.md#impactoccurredfunction)
 - [NotificationOccurredFunction](README.md#notificationoccurredfunction)
+- [ScanQrPopupCallback](README.md#scanqrpopupcallback)
 - [SelectionChangedFunction](README.md#selectionchangedfunction)
 - [ShowPopupFunction](README.md#showpopupfunction)
+- [ShowScanQrPopupFunction](README.md#showscanqrpopupfunction)
 
 ### React Components
 
@@ -28,11 +32,28 @@
 ### Hooks
 
 - [useHapticFeedback](README.md#usehapticfeedback)
+- [useScanQrPopup](README.md#usescanqrpopup)
 - [useShowPopup](README.md#useshowpopup)
 - [useThemeParams](README.md#usethemeparams)
 
 ## Type Aliases
 
+### CloseScanQrPopupFunction
+
+Ƭ **CloseScanQrPopupFunction**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+A method that closes the native popup for scanning a QR code opened with the showScanQrPopup method
+
+##### Returns
+
+`void`
+
+---
+
 ### ColorScheme
 
 Ƭ **ColorScheme**: `"light"` \| `"dark"` \| `undefined`
@@ -98,6 +119,30 @@ A method tells that a task or action has succeeded, failed, or produced a warnin
 
 ---
 
+### ScanQrPopupCallback
+
+Ƭ **ScanQrPopupCallback**: (`text`: `string`) => `true` \| `void`
+
+#### Type declaration
+
+▸ (`text`): `true` \| `void`
+
+If an optional callback parameter was passed, the callback function will be called and the text from the QR
+code will be passed as the first argument.
+Returning true inside this callback function causes the popup to be closed.
+
+##### Parameters
+
+| Name   | Type     |
+| :----- | :------- |
+| `text` | `string` |
+
+##### Returns
+
+`true` \| `void`
+
+---
+
 ### SelectionChangedFunction
 
 Ƭ **SelectionChangedFunction**: () => `void`
@@ -139,6 +184,30 @@ Then function provided Promise, and resolve the field id of the pressed button w
 
 Button id as string, it was described by [ShowPopupButton](interfaces/ShowPopupButton.md)
 
+---
+
+### ShowScanQrPopupFunction
+
+Ƭ **ShowScanQrPopupFunction**: (`params`: [`ScanQrPopupParams`](interfaces/ScanQrPopupParams.md), `callback?`: [`ScanQrPopupCallback`](README.md#scanqrpopupcallback)) => `void`
+
+#### Type declaration
+
+▸ (`params`, `callback?`): `void`
+
+A method that shows a native popup for scanning a QR code described
+by the params argument of the type [ScanQrPopupParams](interfaces/ScanQrPopupParams.md).
+
+##### Parameters
+
+| Name        | Type                                                   |
+| :---------- | :----------------------------------------------------- |
+| `params`    | [`ScanQrPopupParams`](interfaces/ScanQrPopupParams.md) |
+| `callback?` | [`ScanQrPopupCallback`](README.md#scanqrpopupcallback) |
+
+##### Returns
+
+`void`
+
 ## React Components
 
 ### BackButton
@@ -211,6 +280,18 @@ readonly [[`ImpactOccurredFunction`](README.md#impactoccurredfunction), [`Notifi
 
 ---
 
+### useScanQrPopup
+
+▸ **useScanQrPopup**(): readonly [[`ShowScanQrPopupFunction`](README.md#showscanqrpopupfunction), [`CloseScanQrPopupFunction`](README.md#closescanqrpopupfunction)]
+
+The hook provided showScanQrPopup function of the type [ShowScanQrPopupFunction](README.md#showscanqrpopupfunction) and closeScanQrPopup [CloseScanQrPopupFunction](README.md#closescanqrpopupfunction).
+
+#### Returns
+
+readonly [[`ShowScanQrPopupFunction`](README.md#showscanqrpopupfunction), [`CloseScanQrPopupFunction`](README.md#closescanqrpopupfunction)]
+
+---
+
 ### useShowPopup
 
 ▸ **useShowPopup**(): [`ShowPopupFunction`](README.md#showpopupfunction)

docs/interfaces/ScanQrPopupParams.md

@@ -0,0 +1,20 @@
+[@vkruglikov/react-telegram-web-app](../README.md) / ScanQrPopupParams
+
+# Interface: ScanQrPopupParams
+
+This object describes the native popup for scanning QR codes.
+You have to see original interface [telegram!ScanQrPopupParams](https://core.telegram.org/bots/webapps#scanqrpopupparams).
+
+## Table of contents
+
+### Properties
+
+- [text](ScanQrPopupParams.md#text)
+
+## Properties
+
+### text
+
+• **text**: `string`
+
+The text to be displayed under the 'Scan QR' heading, 0-64 characters.

docs/interfaces/ThemeParams.md

@@ -65,10 +65,6 @@ Link color in the #RRGGBB format.
 
 Secondary background color in the #RRGGBB format.
 
-**`Since`**
-
-6.1
-
 ---
 
 ### text_color