react telegram web app Download - react telegram web app Código Fonte Download

react telegram web app

Outro código-fonte

v2.1.9

Baixar

Reagir componentes para o Telegram Miniapp

Exemplos de demonstração ao vivo e código

Você pode experimentar o Bot Telegrama de demonstração aberto com o React WebApp @react_telegram_web_app_bot.

Além disso, você pode procurar código -fonte de demonstração.

Instalação e comece

1️⃣ O principal , você deve fazer a inicialização da etapa de aplicativos da web, porque o pacote tem dependência do contexto do aplicativo da web do Telegram.

2️⃣ Instale executando: npm i @vkruglikov/react-telegram-web-app --save . Hoje apoiamos o React^18.

3️⃣ Experimente o código escrevendo.

 importar {mainButton, USESHOWPOPUP} de '@vkruglikov/react-telegram-web-app'; const content = () => {
  const showpopup = usaSHOWPOPUP ();

  const handleclick = () => showpopup ({message: 'hello, eu sou pop -up',});

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

Documentação curta

Componentes

MainButton - O componente controla o botão principal, exibido na parte inferior do aplicativo da web na interface do telegrama.
BackButton - Este componente controla o botão Voltar, que pode ser exibido no cabeçalho do aplicativo da Web na interface Telegram.

WebAppProvider - O WebAppProvider fornece contexto com componentes e ganchos. Você pode tentar passar um objeto com opções

 importar {webAppProvider, mainButton, backbutton} de '@vkruglikov/react-telegram-web-app'; <webAppProvider
  opções = {{smoothButTonstion: true,
  }}>
  {/** Use componentes dentro do provedor*/}
  <MainButton {...} />
  <BackButton {...} /> < /webAppProvider>

Ganchos

USESHOWPOPUP - Este gancho fornece função showPopup que mostra um pop -up nativo.
UseHaptTicFeedback - Este gancho fornece funções impactOccurred , notificationOccurred e selectionChanged que controla o feedback háptico.
UndethemeParams - Este gancho fornece o objeto colorScheme e themeParams .
USesCanQRPOPUP - Este gancho fornece funções showScanQrPopup e closeScanQrPopup .
UserEadTextFromClipboard - Este gancho fornece a função readTextFromClipboard .
UsawitchinlineQuery - Este gancho fornece função switchInlineQuery .
useExpand - Este gancho fornece estado isExpanded e manípulo expand() .
USECLOUDSTORAGE - Este gancho fornece objeto CloudStorage como funções de promessa
useInitdata - Este gancho fornece InitDataUnsafe e InitData objeto
usewebapp - este gancho apenas fornece objeto nativo WebApp

Roteiro

Aqui está o que está por vir:

No futuro, gostaríamos de usar componentes dos EUA também em aplicativos da web, sem o contexto do telegrama.
TOLLE TELEGRAM WEBAPP SUPORTE
Suporte de recursos do WebApp do Telegram principal