@v-miniapp/ui-react

@v-miniapp/ui-react là bộ thư viện component React mạnh mẽ được thiết kế đặc biệt cho việc phát triển V-MiniApp.

📚 Tài liệu chính thức: Components | V-MiniApp

Cài đặt

npm install @v-miniapp/ui-react
# hoặc
pnpm add @v-miniapp/ui-react
# hoặc
yarn add @v-miniapp/ui-react

Import Styles

Option 1: Sử dụng CSS chuẩn

Đảm bảo bạn import CSS từ phía component để UI hoạt động tốt nhất:

import '@v-miniapp/ui-react/styles.css'

Option 2: Tích hợp với Tailwind CSS

Nếu mini app của bạn đang sử dụng Tailwind CSS, bạn có thể tích hợp dễ dàng bằng cách thêm một dòng import vào file Tailwind config:

/* tailwind.css hoặc file CSS chính của bạn */
@import '@v-miniapp/ui-react/tailwind';

Lưu ý: Khi tích hợp với Tailwind, bạn không cần import @v-miniapp/ui-react/styles.css nữa.

Ví dụ bắt đầu sử dụng

import { App, type IAppConfig } from '@v-miniapp/ui-react'

// Tạo các page components
const HomePage = () => {
  return <div>Trang chủ</div>
}

const SettingsPage = () => {
  return <div>Cài đặt</div>
}

const appConfig: IAppConfig = {
  // Animation giữa các pages: 'none', 'slide_up', 'slide_left', 'fade_in'
  animation: {
    type: 'slide_left',
  },
  // Keep-alive: giữ state của pages khi navigate
  keepAlive: {
    enable: true,
  },

  pages: [
    {
      pathname: '/home',
      Component: HomePage,
      navigationBar: {
        title: 'Trang chủ',
      },
    },
    {
      pathname: '/settings',
      Component: SettingsPage,
      navigationBar: {
        title: 'Cài đặt',
      },
    },
  ],
}

export const MiniApp = () => {
  return <App config={appConfig} />
}

⚠️ Lưu ý quan trọng

Khi sử dụng component App từ @v-miniapp/ui-react, bạn đã có sẵn NavigationBar component được quản lý bởi SDK. Nếu bạn cấu hình window trong app-config.json để hiển thị title bar/navigation bar từ native, sẽ có thể bị trùng lặp với component của ui-react.

Giải pháp: Nếu bạn sử dụng NavigationBar từ @v-miniapp/ui-react, bạn nên cấu hình trong app-config.json để ẩn native title bar:

{
  "window": {
    "defaultTitle": "",
    "transparentTitle": "always"
  }
}