@delab-team/de-ui
v0.0.29
Published
A versatile and customizable React UI library designed to streamline the development of beautiful and responsive user interfaces. Packed with a rich set of components and themes, it empowers developers to create stunning web applications with ease.
Downloads
32
Readme
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:
Modals:
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:
Menu:
- MobileMenu: Readme
Wrappers:
Tables:
- Table: Readme