### Install SSL Certificate (mkcert) - Bash

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/demo/README.md

Uses the mkcert tool to generate a locally trusted SSL certificate for the specified domain. This is necessary for developing web apps that require HTTPS, such as Telegram Web Apps.

```bash
mkcert react-telegram-web-app.domain
```

--------------------------------

### Using useReadTextFromClipboard Hook in TSX

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This example demonstrates how to use the `useReadTextFromClipboard` hook to get a function that reads text from the user's clipboard. It shows how to call the returned `readText` function, which returns a Promise, and handle the result using `.then()` or `await`.

```tsx
import { useReadTextFromClipboard } from '@vkruglikov/react-telegram-web-app';

const readText = useReadTextFromClipboard();

readText().then(console.log);
// or
await readText();
```

--------------------------------

### Using useInitData Hook in TSX

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This snippet shows how to use the `useInitData` hook to retrieve the `initDataUnsafe` and `initData` properties provided by the Telegram Web App. It demonstrates two common ways to destructure the returned array: getting only `initDataUnsafe` or getting both values.

```tsx
import { useInitData } from '@vkruglikov/react-telegram-web-app';

const [initDataUnsafe] = useInitData();
const [initDataUnsafe, initData] = useInitData();
```

--------------------------------

### Using useHapticFeedback Hook in TSX

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This example illustrates how to use the `useHapticFeedback` hook to access functions for triggering different types of haptic feedback: `impactOccurred`, `notificationOccurred`, and `selectionChanged`. It shows how to call `impactOccurred` with 'heavy' style and `notificationOccurred` with 'success' type.

```tsx
import { useHapticFeedback } from '@vkruglikov/react-telegram-web-app';

const [impactOccurred, notificationOccurred, selectionChanged] =
  useHapticFeedback();
// const [,notificationOccurred] = useHapticFeedback();

impactOccurred('heavy');
notificationOccurred('success');
```

--------------------------------

### Using useExpand Hook in TSX

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This snippet demonstrates how to use the `useExpand` hook to get the current expansion state (`isExpanded`) and a function (`expand`) to request expansion. It shows a button that calls `expand()` only if the app is not already expanded.

```tsx
import { useExpand } from "@vkruglikov/react-telegram-web-app";

const [isExpanded, expand] = useExpand();
const handleClick = () => !isExpanded && expand();

<button onClick={handleClick}>
    {showTextWhenScreenExpanded && 'expanded' : 'to expand'}
</button>
```

--------------------------------

### Configuring WebAppProvider with Options in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/README.md

Shows how to wrap components like MainButton and BackButton within the WebAppProvider to provide the Telegram Web App context. It also demonstrates passing options, such as smoothButtonsTransition, to the provider. Requires the @vkruglikov/react-telegram-web-app package.

```jsx
import { WebAppProvider, MainButton, BackButton } from '@vkruglikov/react-telegram-web-app';

<WebAppProvider
  options={{
    smoothButtonsTransition: true,
  }}
>
  {/** Use components inside provider */}
  <MainButton {...} />
  <BackButton {...} />
</WebAppProvider>
```

--------------------------------

### Using MainButton and useShowPopup Hook in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/README.md

Demonstrates how to import and use the MainButton component and the useShowPopup hook to display a native Telegram popup when the button is clicked. Requires the @vkruglikov/react-telegram-web-app package.

```jsx
import { MainButton, useShowPopup } from '@vkruglikov/react-telegram-web-app';

const Content = () => {
  const showPopup = useShowPopup();

  const handleClick = () =>
    showPopup({
      message: 'Hello, I am popup',
    });

  return <MainButton text="SHOW POPUP" onClick={handleClick} />;
};
```

--------------------------------

### Defining ShowScanQrPopupFunction Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for a function that shows the native QR code scanning popup. It accepts parameters to configure the popup and an optional callback function to handle the scanned text.

```TypeScript
type ShowScanQrPopupFunction = (params: ScanQrPopupParams, callback?: ScanQrPopupCallback) => void;
```

--------------------------------

### Using useShowPopup Hook in React Telegram Web App

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This hook provides the `showPopup` function, which allows displaying native Telegram popups. The function takes parameters defining the popup's content and buttons and returns a Promise resolving with the ID of the clicked button.

```tsx
import { useShowPopup } from '@vkruglikov/react-telegram-web-app';

const showPopup = useShowPopup();

showPopup({ message: 'Hello world' }).then(buttonId => console.log(buttonId));
```

--------------------------------

### Providing WebApp Context with WebAppProvider Component in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

The `WebAppProvider` component is essential for providing the Telegram Web App context to consuming hooks and components. Wrap your application or relevant parts with this provider. It also accepts an `options` prop to customize provider behavior.

```tsx
import { WebAppProvider } from "@vkruglikov/react-telegram-web-app";

<WebAppProvider>
  <YourAppComponent />
</WebAppProvider>

// You can pass options {@link Options}
<WebAppProvider
  options={{
    smoothButtonsTransition: true
  }}
>
  <YourAppComponent />
</WebAppProvider>
```

--------------------------------

### Defining WebAppProviderProps Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the props structure for a React component that acts as a provider for the Web App context, extending standard React children props with an optional options object.

```TypeScript
type WebAppProviderProps = PropsWithChildren<{ options?: Options }>;
```

--------------------------------

### Defining ScanQrPopupCallback Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for an optional callback function used with the QR scanner popup. This function receives the scanned text and can return `true` to close the popup.

```TypeScript
type ScanQrPopupCallback = (text: string) => true | void;
```

--------------------------------

### Defining ShowPopupFunction Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for a function that displays a native Telegram popup. It takes parameters defining the popup content and returns a Promise that resolves with the ID of the button pressed by the user.

```TypeScript
type ShowPopupFunction = (params: ShowPopupParams) => Promise<string>;
```

--------------------------------

### Defining WebAppUser Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the structure for a Telegram Web App user object, including basic information like ID, first name, and optional fields such as last name, username, language code, premium status, and various flags.

```TypeScript
type WebAppUser = { id: number; added_to_attachment_menu?: true; allows_write_to_pm?: true; first_name: string; is_bot?: boolean; is_premium?: boolean; language_code?: string; last_name?: string; photo_url?: string; username?: string; };
```

--------------------------------

### Rendering Telegram SettingsButton Component in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

The `SettingsButton` component renders the native Telegram Settings Button. Similar to other buttons, you can attach an action to it using the `onClick` prop.

```tsx
import { SettingsButton } from '@vkruglikov/react-telegram-web-app';

<SettingsButton onClick={() => console.log('Hello, I am settings button!')} />;
```

--------------------------------

### Rendering Telegram MainButton Component in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

The `MainButton` component renders the native Telegram Main Button. It supports setting the button text via the `text` prop and defining an action with the `onClick` handler.

```tsx
import { MainButton } from '@vkruglikov/react-telegram-web-app';

<MainButton
  text="CLICK ME"
  onClick={() => console.log('Hello, I am button!')}
/>;
```

--------------------------------

### Defining SwitchInlineQueryFunction Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for a function that inserts the bot's username and a specified inline query into the current chat's input field, optionally restricting the types of chats where this action is available.

```TypeScript
type SwitchInlineQueryFunction = (query: string, chatType?: ("users" | "bots" | "groups" | "channels")[]) => void;
```

--------------------------------

### Defining SetItemFunction Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for a function that wraps the `setItem` method of the Telegram Cloud Storage API, providing a Promise-based interface for setting key-value pairs.

```TypeScript
type SetItemFunction = (key: string, value: string) => Promise<void>;
```

--------------------------------

### Accessing Telegram WebApp Object with useWebApp Hook in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

This hook provides direct access to the native Telegram `WebApp` object. This allows you to interact with the core Telegram Web App API methods and properties not covered by specific hooks or components.

```tsx
import { useWebApp } from '@vkruglikov/react-telegram-web-app';

const WebApp = useWebApp();

console.log(WebApp.version);
```

--------------------------------

### Defining WebAppChat Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the structure for a Telegram Web App chat object, including its ID, title, type (group, supergroup, channel), and optional photo URL and username.

```TypeScript
type WebAppChat = { id: number; photo_url?: string; title: string; type: "group" | "supergroup" | "channel"; username?: string; };
```

--------------------------------

### Accessing Theme Parameters with useThemeParams Hook in React Telegram Web App

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Use this hook to access the current Telegram Web App color scheme and theme parameters. It returns a tuple containing the `colorScheme` string and the `ThemeParams` object, allowing your app to adapt its appearance.

```tsx
import { useThemeParams } from '@vkruglikov/react-telegram-web-app';

const [colorScheme, themeParams] = useThemeParams();

console.log(colorScheme === 'dark');
console.log({
  text_color: themeParams.text_color,
  button_color: themeParams.button_color,
  bg_color: themeParams.bg_color,
});
```

--------------------------------

### Rendering Telegram BackButton Component in React

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

The `BackButton` component renders the native Telegram Back Button within your React application. You can provide an `onClick` handler to define the action performed when the button is pressed.

```tsx
import { BackButton } from '@vkruglikov/react-telegram-web-app';

<BackButton onClick={() => console.log('Hello, I am back button!')} />;
```

--------------------------------

### Define MainButton onClick Type - TypeScript

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/interfaces/MainButtonProps.md

Defines the type signature for the optional onClick property of the MainButtonProps interface. This property is a function that takes no arguments and returns nothing (void), serving as the event handler for the button press.

```TypeScript
() => void
```

--------------------------------

### Defining SelectionChangedFunction Type

Source: https://github.com/vkruglikov/react-telegram-web-app/blob/master/docs/README.md

Defines the type for a function that indicates a user selection change has occurred. This can be used to trigger appropriate haptic feedback in the Telegram app.

```TypeScript
type SelectionChangedFunction = () => void;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.