react telegram web app

React Composants pour Telegram MiniApp

Demo en direct et exemples de code

Vous pouvez essayer Open Demo Telegram Bot avec React WebApp @react_telegram_web_app_bot.

En outre, vous pouvez regarder le code source de démonstration.

Installation et démarrage

1️⃣ Avant tout , vous devez effectuer l'étape d'initialisation des applications Web, car le package a une dépendance du contexte de l'application Web Telegram.

2️⃣ Installer en fonctionnant: npm i @vkruglikov/react-telegram-web-app --save . Aujourd'hui, nous soutenons React ^ 18.

3️⃣ Essayez-le en écrivant du code.

 import {mainbutton, useshowpopup} de '@ vkruglikov / react-telegram-web-app'; const contenu = () => {
  const showpopup = useshowpopup ();

  const handleclick = () => showPopup ({message: 'bonjour, je suis popup',});

  return <mainbutton text = "show popup" onClick = {handleclick} />;};

Courte documentation

Composants

• MainButton - Le composant contrôle le bouton principal, qui s'affiche en bas de l'application Web dans l'interface télégramme.

• Backbutton - Ce composant contrôle le bouton arrière, qui peut être affiché dans l'en-tête de l'application Web dans l'interface télégramme.

• WebApprovider - WebApprovider fournit un contexte avec WebApp pour les composants et les crochets. Vous pouvez essayer de passer un objet avec des options

   Importer {WebApprovider, Mainbutton, Backbutton} de '@ Vkruglikov / React-Telegram-web-App'; <WebApprovider
    Options = {{SmoothButTontransition: true,
    }}>
    {/ ** Utilisez des composants à l'intérieur du fournisseur * /}
    <MainButton {...} />
    <Backbutton {...} /> </ webappprovider>

Crochets

• USESHOWPOPUP - Ce crochet fournit une fonction showPopup qui montre une fenêtre contextuelle native.

• useHapticFeedback - Ce crochet fournit des fonctions impactOccurred , notificationOccurred et selectionChanged qui contrôlent la rétroaction haptique.

• UsethemeParams - Ce crochet fournit colorScheme et de l'objet themeParams .

• USESCANQRPOPUP - Ce crochet fournit des fonctions showScanQrPopup et closeScanQrPopup .

• UserAdTextFromClipboard - Ce crochet fournit la fonction readTextFromClipboard .

• usewitchInlineQuery - Ce crochet fournit une fonction switchInlineQuery .

• useExpand - Ce crochet fournit un état isExpanded et expand() la poignée.

• UseCloudStorage - Ce crochet fournit un objet CloudStorage en tant que fonctions de promesse

• useInitdata - Ce crochet fournit un objet InitDataUnsafe et InitData

• Utilisez WWEBApp - Ce crochet fournit simplement un objet WebApp natif

Feuille de route

Voici ce qui arrive:

• À l'avenir, nous aimerions utiliser les composants américains également dans l'application Web, sans contexte de télégramme.

• Tous les fonctionnalités Télégram WEBAPP

• Prise en charge de la fonctionnalité Télégramme WebApp

Contributeurs

Comme toujours, grâce à nos incroyables contributeurs!

Fait avec des contributeurs.

Contributif

• Lire sur son? Feuille de route et documentation officielle Telegram Mini applications

• Vous avez des questions? Consultez nos exemples, duscussions et problèmes

• Fourchez et contribuez vos propres modifications