react telegram web app

React Componentes para Telegram Miniapp

Ejemplos de demostración y código en vivo

Puede probar el bot de telegrama de demostración abierto con React WebApp @react_telegram_web_app_bot.

Además, puede mirar el código fuente de demostración.

Instalación y comenzar

1anspant , debe hacer el paso de inicialización de aplicaciones web, porque el paquete tiene dependencia del contexto de la aplicación web Telegram.

2minte⃣ Instale ejecutando: npm i @vkruglikov/react-telegram-web-app --save . Hoy apoyamos a React^18.

3️⃣ Pruébelo escribiendo código.

 import {MainButton, UseShowPopup} de '@vkruglikov/react-telegram-web-app'; const content = () => {
  const showPopup = UseShowPopUp ();

  const handLecLick = () => showPopup ({Mensaje: 'Hola, soy PopUp',});

  return <mainButton text = "show popup" onClick = {handLecLick} />;};

Documentación corta

Componentes

• MainButton: el componente controla el botón principal, que se muestra en la parte inferior de la aplicación web en la interfaz Telegram.

• Backbutton: este componente controla el botón Atrás, que se puede mostrar en el encabezado de la aplicación web en la interfaz Telegram.

• WebAppProvider: WebAppProvider proporciona contexto con WebApp para componentes y ganchos. Puede intentar pasar un objeto con opciones

   import {WebAppProvider, MainButton, BackButton} de '@vkruglikov/react-telegram-web-app'; <WebAppProvider
    opciones = {{SmoothButTonstransition: True,
    }}>
    {/** Use componentes dentro del proveedor*/}
    <MainButton {...} />
    <Backbutton {...} /> </sebappProvider>

Manos

• UseShowPopup: este gancho proporciona la función showPopup que muestra una ventana emergente nativa.

• UseHapticFeedback: este gancho proporciona funciones impactOccurred , notificationOccurred curred y selectionChanged que controla la retroalimentación háptica.

• USETHEMEPARAMS: este gancho proporciona el objeto colorScheme y themeParams .

• USECANQRPOPUP: este gancho proporciona funciones showScanQrPopup y closeScanQrPopup .

• UsereDTextFromClipboard: este gancho proporciona la función readTextFromClipboard .

• UssWitchInlineQuery: este gancho proporciona la función switchInlineQuery .

• UseExpand: este gancho proporciona el estado isExpanded y expand() mango.

• USECLOUDStorage: este gancho proporciona el objeto CloudStorage como funciones prometedoras

• UseInitData: este gancho proporciona InitDataUnsafe e InitData Object

• UsewebApp: este gancho solo proporciona objeto WebApp nativo

Hoja de ruta

Esto es lo que viene:

• En el futuro, nos gustaría usar componentes estadounidenses también en aplicaciones web, sin contexto de telegrama.

• All Telegram WebApp Soporte de funciones

• Soporte principal de funciones de Telegram WebApp

Colaboradores

Como siempre, ¡gracias a nuestros increíbles contribuyentes!

Hecho con contribuyentes.

Que contribuye

• Lea sobre su? Hoja de ruta y documentación oficial Telegram mini aplicaciones

• ¿Tienes preguntas? Consulte nuestros ejemplos, duscusiones y problemas

• Bifurcarse y contribuir con tus propias modificaciones