React hooks

import { usePoints, useSafeArea, useSDK, useTheme, useUser } from '@i-catholic/mini-app-sdk/react'

Hook	Returns	Permission	Updates on
useSDK()	{ sdk, inApp, theme, locale }	none	themeChange (locale: once)
useTheme()	'light' | 'dark'	none	themeChange
useUser()	{ user, loading, error, refetch }	user.profile	refetch()
usePoints()	{ points, loading }	points.read	pointsUpdate
useSafeArea()	{ top, bottom, left, right }	none	nativeReady

usePoints() needs points.read for its first read through getPoints(). The pointsUpdate event itself needs no permission.

• Every hook is safe outside the app. It returns defaults ('light', 'vi', null, zero insets).
• Replies that arrive after unmount, or after a newer value, are ignored.
• useUser() and usePoints() trigger the permission prompt on mount the first time. Mount them where asking makes sense to the user.

import { usePoints } from '@i-catholic/mini-app-sdk/react'

function PointsBadge() {
  const { points } = usePoints()
  return <span>{points ?? '–'} điểm</span>
}