### Install TWA SDK React Components
Source: https://github.com/twa-dev/sdk/blob/master/src/react/SecondaryButton/Readme.md
Instructions to install the `@twa-dev/sdk` package using npm, which provides React components for Telegram Web Apps.
```bash
npm i @twa-dev/sdk
```
--------------------------------
### Install TWA SDK React BackButton Component
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BackButton/Readme.md
Instructions to install the `@twa-dev/sdk` package using npm, which provides the React BackButton component for Telegram Web Apps.
```bash
npm i @twa-dev/sdk
```
--------------------------------
### Install TWA SDK React Component
Source: https://github.com/twa-dev/sdk/blob/master/src/react/MainButton/Readme.md
This command installs the `@twa-dev/sdk` package using npm, which provides the React component for Telegram Web Apps MainButton, enabling its use in React applications.
```bash
npm i @twa-dev/sdk
```
--------------------------------
### Install Telegram Web Apps SDK via npm
Source: https://github.com/twa-dev/sdk/blob/master/Readme.md
This command installs the @twa-dev/sdk package using npm, making it available for use in your project. It is the first step to integrate the Telegram Web Apps SDK into a modern development workflow.
```bash
npm i @twa-dev/sdk
```
--------------------------------
### Install TWA SDK for React Components
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BottomBar/Readme.md
Instructions to install the `@twa-dev/sdk` package using npm. This package provides the necessary React components for integrating Telegram Web Apps features, including the BottomBar.
```bash
npm i @twa-dev/sdk
```
--------------------------------
### Using React BottomBar Component with Main and Secondary Buttons
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BottomBar/Readme.md
Illustrates the declarative approach using the `BottomBar` React component from `@twa-dev/sdk/react`. This example shows how to wrap `MainButton` and `SecondaryButton` components within `BottomBar`, setting its background color and defining click handlers for the buttons.
```jsx
import { BottomBar, MainButton, SecondaryButton } from '@twa-dev/sdk/react';
alert('continue')} />
alert('cancelled')} />
```
--------------------------------
### Traditional Telegram Web Apps SDK Integration via HTML Script Tag
Source: https://github.com/twa-dev/sdk/blob/master/Readme.md
This HTML snippet demonstrates the traditional method of integrating the Telegram Web Apps SDK by directly including a script tag from Telegram's CDN. It shows how to initialize the SDK and call a basic function like showAlert directly from the global window.Telegram.WebApp object.
```html
TWA
```
--------------------------------
### Modern Telegram Web Apps SDK Usage with ES Modules
Source: https://github.com/twa-dev/sdk/blob/master/Readme.md
This JavaScript snippet illustrates the modern approach to using the Telegram Web Apps SDK by importing it as an ES module. It demonstrates how to import the WebApp object from the @twa-dev/sdk package and then use its methods, such as showAlert, in a more modular and maintainable way.
```js
import WebApp from '@twa-dev/sdk'
WebApp.showAlert('Hey there!');
```
--------------------------------
### Imperative Telegram Web Apps MainButton SDK Usage
Source: https://github.com/twa-dev/sdk/blob/master/src/react/MainButton/Readme.md
This JavaScript snippet demonstrates the traditional, imperative way to interact with the Telegram Web Apps MainButton directly through the `window.Telegram.WebApp` object. It shows how to set text, display the button, and attach an event listener using the raw SDK.
```js
const MainButton = window.Telegram.WebApp.MainButton;
MainButton.setText('Submit');
MainButton.show();
MainButton.onClick(() => alert('submitted'));
```
--------------------------------
### Control TWA SecondaryButton Imperatively with SDK
Source: https://github.com/twa-dev/sdk/blob/master/src/react/SecondaryButton/Readme.md
Demonstrates the imperative way to control the Telegram Web Apps SecondaryButton using the native SDK, showing how to set parameters, show the button, and attach an onClick handler.
```js
const SecondaryButton = window.Telegram.WebApp.SecondaryButton;
SecondaryButton.setParams({ text: 'Cancel', position: 'bottom' });
SecondaryButton.show();
SecondaryButton.onClick(() => alert('cancelled'));
```
--------------------------------
### Use TWA SecondaryButton React Component
Source: https://github.com/twa-dev/sdk/blob/master/src/react/SecondaryButton/Readme.md
Illustrates how to use the `@twa-dev/sdk/react` package to integrate `SecondaryButton` and `MainButton` components declaratively within a React application, simplifying event handling and button management.
```jsx
import { MainButton, SecondaryButton } from '@twa-dev/sdk/react';
alert('continue')} />
alert('cancelled')} />
```
--------------------------------
### Declarative React Component for TWA MainButton
Source: https://github.com/twa-dev/sdk/blob/master/src/react/MainButton/Readme.md
This JSX snippet illustrates the declarative approach using the `@twa-dev/sdk/react` package. It shows how to import and use the `MainButton` React component, passing props like `text` and `onClick` for simplified integration and state management within a React application.
```jsx
import { MainButton } from '@twa-dev/sdk/react';
alert('submitted')} />
```
--------------------------------
### BottomBar React Component Props Documentation
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BottomBar/Readme.md
Documentation for the properties accepted by the `BottomBar` React component. These props provide a declarative interface to control the appearance and behavior of the Telegram Web Apps bottom bar, corresponding to the underlying TWA SDK properties.
```APIDOC
BottomBar Component Props:
children: ReactNode
Description: Child elements to be rendered inside the BottomBar, typically MainButton and SecondaryButton components.
bgColor: string
Description: The background color of the bottom bar. This property directly corresponds to the TWA SDK's `bottomBarColor`.
```
--------------------------------
### Imperative Telegram Web Apps BackButton SDK Usage
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BackButton/Readme.md
Demonstrates the traditional, imperative way to control the Telegram Web Apps BackButton directly through the `window.Telegram.WebApp.BackButton` interface, including showing the button and attaching a click event handler.
```jsx
const BackButton = window.Telegram.WebApp.BackButton;
BackButton.show();
BackButton.onClick(() => window.history.back());
```
--------------------------------
### SecondaryButton React Component Props
Source: https://github.com/twa-dev/sdk/blob/master/src/react/SecondaryButton/Readme.md
Defines the available properties for the `SecondaryButton` React component, which correspond to the underlying TWA SDK parameters and methods.
```APIDOC
SecondaryButton Component:
Props:
text: string
color: string
textColor: string
disabled: boolean
progress: boolean
onClick: function
hasShineEffect: boolean
position: string
```
--------------------------------
### Declarative React BackButton Component Usage for TWA
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BackButton/Readme.md
Shows how to use the declarative React component from `@twa-dev/sdk/react` to integrate the Telegram Web Apps BackButton, simplifying its usage with a direct `onClick` prop.
```js
import { BackButton } from '@twa-dev/sdk/react';
window.history.back()} />
```
--------------------------------
### MainButton React Component Props Reference
Source: https://github.com/twa-dev/sdk/blob/master/src/react/MainButton/Readme.md
This section lists the available props for the `MainButton` React component, which directly correspond to the properties and methods of the underlying Telegram Web Apps MainButton SDK. These props allow for declarative control over the button's appearance and behavior within a React application.
```APIDOC
MainButton Component Props:
- `text`: string - The text displayed on the button.
- `color`: string - The background color of the button.
- `textColor`: string - The text color of the button.
- `disabled`: boolean - Indicates whether the button is disabled.
- `progress`: boolean - Indicates whether the button shows a progress indicator.
- `onClick`: function - A callback function executed when the button is clicked.
- `hasShineEffect`: boolean - Indicates whether the button has a shine effect.
```
--------------------------------
### Accessing and Setting TWA Bottom Bar Color Imperatively
Source: https://github.com/twa-dev/sdk/blob/master/src/react/BottomBar/Readme.md
Demonstrates the traditional, imperative way to interact with the Telegram Web Apps SDK's bottom bar. This snippet shows how to directly read the current bottom bar color and set a new one using `window.Telegram.WebApp` methods.
```javascript
const bottomBarColor = window.Telegram.WebApp.bottomBarColor;
window.Telegram.WebApp.setBottomBarColor('#ff0000');
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.