eitaa-miniapp

v1.0.11

Published

2 hours ago

JavaScript library for Eitaa MiniApp integration, compatible with React, Vue, Angular, and plain JS.

Downloads

0High
0Medium
0Low

mstf-m

eitaa webapp miniapp javascript typescript

Eitaa MiniApp Integration Library

A JavaScript/TypeScript library for integrating Eitaa MiniApp features into modern JavaScript projects, compatible with React, Vue, Angular, and vanilla JavaScript.

📖 Overview

The eitaa-miniapp library simplifies the process of integrating Eitaa MiniApp functionalities into your web applications. It provides a comprehensive API wrapper, enabling seamless access to essential features such as interacting with the Eitaa WebApp, handling buttons, and more.

🚀 Features

Easy Initialization: Access the Eitaa MiniApp API with a single import.
Compatibility: Works with React, Vue, Angular, and plain JavaScript.
TypeScript Support: Includes complete type definitions for a smooth TypeScript experience.
Comprehensive API: Access to WebApp and WebView methods for versatile MiniApp interactions.

📦 Installation

Install the package via NPM:

npm install eitaa-miniapp

📚 Usage

Basic Setup

Import the library and start using EitaaMiniApp right away:

import { EitaaMiniApp } from "eitaa-miniapp";

// Example: Accessing the user's init data
console.log(EitaaMiniApp.WebApp.initData);

Example in a React Component

import React from "react";
import { EitaaMiniApp } from "eitaa-miniapp";

const App = () => {
  const userData = EitaaMiniApp.WebApp.initData;

  const handleMainButtonClick = () => {
    EitaaMiniApp.WebApp.MainButton.setParams({ text: "Clicked!" });
  };

  return (
    <div>
      <h1>User Data: {userData}</h1>
      <button onClick={handleMainButtonClick}>Click Me</button>
    </div>
  );
};

export default App;

Example in a Vue Component

<template>
  <div>
    <h1>User Data: {{ userData }}</h1>
    <button @click="handleButtonClick">Click Me</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { EitaaMiniApp } from "eitaa-miniapp";

export default defineComponent({
  name: "EitaaComponent",
  setup() {
    const userData = ref(EitaaMiniApp.WebApp.initData);

    const handleButtonClick = () => {
      EitaaMiniApp.WebApp.MainButton.setParams({ text: "Clicked!" });
    };

    return { userData, handleButtonClick };
  }
});
</script>

Plain JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Eitaa MiniApp Example</title>
</head>
<body>
  <h1 id="userData">User Data:</h1>
  <button id="actionButton">Click Me</button>

  <script type="module">
    import { EitaaMiniApp } from "./node_modules/eitaa-miniapp/dist/index.mjs";

    document.getElementById("userData").innerText = EitaaMiniApp.WebApp.initData;

    document.getElementById("actionButton").onclick = () => {
      EitaaMiniApp.WebApp.MainButton.setParams({ text: "Clicked!" });
    };
  </script>
</body>
</html>

🛠️ API Reference

EitaaMiniApp.WebApp

initData: Raw initialization data transferred to the MiniApp.
initDataUnsafe: Parsed initialization data. Includes user information such as user.id, user.username, etc.
MainButton: Controls the primary button at the bottom of the MiniApp.
- enable(): Enables the button.
- disable(): Disables the button.
- show(): Shows the button.
- setParams(params): Sets button parameters such as text, color, text_color.
BackButton: Controls the back button.
- show(): Displays the back button.
- hide(): Hides the back button.
showPopup(params): Displays a popup with specified title, message, and buttons.

🌍 Compatibility

React: ^16.8.0 and above
Vue: ^2.6.0 and above
Angular: ^9.0.0 and above
JavaScript: Compatible with both modern (ES6+) and legacy (ES5) JavaScript environments

🤝 Contributing

We welcome contributions! Feel free to submit issues, pull requests, or feature requests. For major changes, please discuss them in an issue first.