@delab-team/de-ui v0.0.29

Install

• as local project package

yarn add @delab-team/de-ui

Documentation

It is necessary to wrap your entire application within the AppInner component. Failure to do so may result in the application not working as expected. You also have the option to manually set the value to true in order to witness the application's outcome adorned with Telegram styles.

index.html

<script src="https://telegram.org/js/telegram-web-app.js"></script>

App.tsx

import { AppInner } from '@delab-team/de-ui' 
import { useEffect, useState } from 'react'

declare global {
    interface Window {
        Telegram?: any
    }
}

export const App: React.FC = () => {
    const [ firstRender, setFirstRender ] = useState<boolean>(false)
    const [ isTg, setIsTg ] = useState<boolean>(false)

    useEffect(() => {
      if (!firstRender) {
        setFirstRender(true)

        const isTgCheck = window.Telegram.WebApp.initData !== ''
        const TgObj = window.Telegram.WebApp

        setIsTg(isTgCheck)
        if (isTgCheck) {
            TgObj.ready()
            TgObj.enableClosingConfirmation()
            TgObj.expand()
        }
      }

    }, [ firstRender ])

    return (
      <AppInner isTg={isTg}>
            {/* Your application's goes here */}
      </AppInner>,
    )

}

Here's a list of components included in our library:

• InfoCell: Readme

• SettingsCell: Readme

Modals:

• Alert: Readme

• ModalConfirm: Readme

• Modal: Readme

• AlertStatus Readme

Common:

• Avatar: Readme

• Button: Readme

• Div: Readme

• Font: Readme

• Footer: Readme

• ProgressBar: Readme

• Spinner: Readme

• Toggle: Readme

• Tooltip: Readme

• Li: Readme

Forms:

• Checkbox: Readme

• FileUpload: Readme

• Input: Readme

• Radio: Readme

• Range: Readme

• Select: Readme

• TextArea: Readme

Headers

• HeaderPanel: Readme

• HeaderSearchTabs: Readme

• HeaderSearch: Readme

• HeaderTabs: Readme

• HeaderTitle: Readme

• Header: Readme

Icons:

• IconImg: Readme

• IconSelector: Readme

• LogoSelector Readme

• SocialIcons Readme

Menu:

• MobileMenu: Readme

Wrappers:

• PageWrapper: Readme

• PageWrapperSidebar: Readme

Tables:

• Table: Readme

Typography:

• Title: Readme

• Text: Readme

License

MIT License Copyright (c) 2023 DeLab Team