Merge pull request #164 from Telegram-Mini-Apps/158-add-hook-in-sdk-r…

…eact-to-get-init-data-raw-representation

158 add hook in sdk react to get init data raw representation

.changeset/five-waves-heal.md

@@ -0,0 +1,5 @@
+---
+"@tma.js/sdk-react": minor
+---
+
+Add `useInitDataRaw` utility to retrieve init data raw representation.

packages/sdk-react/src/lib/index.ts

@@ -1,7 +1,6 @@
 export * from './back-button/index.js';
 export * from './closing-behavior/index.js';
 export * from './haptic-feedback/index.js';
-export * from './init-data/index.js';
 export * from './launch-params/index.js';
 export * from './main-button/index.js';
 export * from './popup/index.js';
@@ -10,4 +9,5 @@ export * from './viewport/index.js';
 export * from './web-app/index.js';
 export * from './cloud-storage.js';
 export { usePostEvent } from './hooks.js';
+export * from './init-data.js';
 export * from './theme-params.js';

packages/sdk-react/src/lib/init-data.tsx

@@ -0,0 +1,43 @@
+import React, { type ComponentType } from 'react';
+import type { InitData } from '@tma.js/sdk';
+
+import { useUnit } from '../provider/index.js';
+
+interface EnhancedProps {
+  initData: InitData | null;
+  initDataRaw: string | null;
+}
+
+/**
+ * Returns InitData component instance.
+ */
+export function useInitData(): InitData | null {
+  return useUnit('initData') || null;
+}
+
+/**
+ * Returns init data raw representation.
+ */
+export function useInitDataRaw(): string | null {
+  return useUnit('initDataRaw') || null;
+}
+
+/**
+ * HOC which passes InitData SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withInitData<P extends Partial<EnhancedProps>>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, keyof EnhancedProps>> {
+  return function WithInitData(props) {
+    const enhancedProps = {
+      ...props,
+      initData: useInitData(),
+      initDataRaw: useInitDataRaw(),
+    } as P;
+
+    return <Component {...enhancedProps} />;
+  };
+}
+
+export { InitData };