react telegram web app

Reagieren Sie Komponenten für die Telegramm -Miniapp

Live -Demo- und Codebeispiele

Sie können den Demo -Telegramm -Bot mit React webapp @react_telegram_web_app_bot öffnen.

Außerdem können Sie Demo -Quellcode ansehen.

Installation und Einstieg

1️⃣ In erster Linie müssen Sie Web -Apps initialisieren, da das Paket eine Abhängigkeit von Telegram Web App -Kontext hat.

2️⃣ Installieren Sie durch Rennen: npm i @vkruglikov/react-telegram-web-app --save . Heute unterstützen wir React^18.

3️⃣ Probieren Sie es durch das Schreiben von Code aus .

 Importieren {Mainbutton, useshowpopup} aus '@vkruglikov/react-telegram-web-App'; const content = () => {
  const showpopup = useshowpopup ();

  const handleclick = () => showpopup ({message: 'Hallo, ich bin popup',});

  return <mainbutton text = "popup anzeigen" onclick = {HandleClick} />;};

Kurze Dokumentation

Komponenten

• Mainbutton - Die Komponente steuert die Hauptknopf, die am Ende der Web -App in der Telegrammschnittstelle angezeigt wird.

• Backbutton - Diese Komponente steuert die Back -Taste, die im Header der Web -App in der Telegrammschnittstelle angezeigt werden kann.

• WebAPPPPROVIDER - WebAPPPROVIDER bietet einen Kontext mit WebApp für Komponenten und Hooks. Sie können versuchen, ein Objekt mit Optionen zu übergeben

   importieren {webappprovider, mainbutton, backbutton} von '@vkruglikov/react-telegram-web-App'; <webappprovider
    Optionen = {{SmoothButtonsingansition: TRUE,
    }}>
    {/** Verwenden Sie Komponenten im Anbieter*/}
    <Mainbutton {...} />
    <Backbutton {...} /> < /webappprovider>

Haken

• UsSeShowPopup - Dieser Hook bietet showPopup -Funktion, die ein natives Popup zeigt.

• UseHapticFeedback - Dieser Hook bietet impactOccurred , notificationOccurred und selectionChanged , die das haptische Feedback kontrollieren.

• Usethemeparams - Dieser Haken bietet colorScheme und themeParams -Objekt.

• Usescanqrpopup - Dieser Hook bietet showScanQrPopup und closeScanQrPopup -Funktionen.

• UserEdTextFromClipboard - Dieser Hook bietet die Funktion readTextFromClipboard .

• UseSwitchInLineQuery - Dieser Hook bietet switchInlineQuery -Funktion.

• useExpand - Dieser Haken bietet isExpanded -Status und expand() Handle.

• UseCloudStorage - Dieser Hook bietet CloudStorage -Objekt als Versprechenfunktionen

• useInitdata - Dieser Hook bietet InitDataUnsafe und InitData -Objekt

• Usewebapp - Dieser Haken bietet nur natives WebApp -Objekt

Roadmap

Hier ist, was steht vor:

• In Zukunft möchten wir US -Komponenten auch in der Webanwendung ohne Telegrammkontext verwenden.

• Alle Telegram -WebApp -Funktionsunterstützung

• Haupt -Funktion der Telegramm -WebApp -Funktionsunterstützung

Mitwirkende

Wie immer dank unserer erstaunlichen Mitwirkenden!

Mit Mitwirkenden gemacht.

Beitragen

• Über seine nachlesen? Roadmap und offizielle Dokumentation Telegramm Mini -Apps

• Fragen haben? Schauen Sie sich unsere Beispiele, Duscussions und Probleme an

• Fork und tragen Sie Ihre eigenen Modifikationen bei