البدء السريع

تفترض هذه الصفحة أنك أكملت التثبيت، واستوردت theme.css وأنماط المكوّنات التي تستخدمها.

دون الحاجة إلى install

لا توجد آلية إضافات (plugins) في @lh-ui/react: جميع الصادرات مسمَّاة، فاستورِد ما تحتاج إليه مباشرةً.

import { LhButton } from '@lh-ui/react'
import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/button'

export default function App() {
  return <LhButton type="primary">ابدأ الاستخدام</LhButton>
}

التحكم وعدم التحكم

تدعم المكوّنات المتحكَّم بها كلًّا من value + onChange (متحكَّم) وdefaultValue (غير متحكَّم)، بدلالات توافق النماذج الأصلية في React:

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* متحكَّم */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* غير متحكَّم */}
      <LhInput defaultValue="قيمة افتراضية" />
    </>
  )
}

استدعاءات الأحداث بمعاملين

جميع استدعاءات onChange في مكوّنات النماذج تأخذ معاملين (value, event): الأول هو القيمة الجديدة، والثاني هو الحدث الأصلي. وهو متماثل بنيويًا مع emit('change', [val, e]) في lh-ui-plus مما يُسهِّل الترحيل من Vue.

التكوين العام

استخدم LhConfigProvider لتمرير الحجم العام واللغة ومتغيّرات السمة:

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider size="middle" locale="zh-CN">
      <YourApp />
    </LhConfigProvider>
  )
}

وحتى دون تغليف LhConfigProvider لن تُخطئ المكوّنات — فجانب الاستهلاك يملك قيمًا افتراضية احتياطية بحقول undefined جميعها.

الخدمات الحتمية

تُركَّب خدمات مثل message عبر حاوية أحادية تُنشأ بتكاسل، فلا يُنشَأ React root إلا عند أول استدعاء:

import { message, notification, loading } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('تم الحفظ بنجاح')
notification.success({ title: 'تم الحفظ بنجاح', content: 'تم نشر العمل في المعرض.' })
loading.show({ text: 'جارٍ الإرسال…' })

مهام الخدمات الثلاثة: message تنبيه علوي خفيف، وnotification إشعار رباعي الزوايا بعنوان ونص، وloading غطاء تحميل لملء الشاشة أو لجزء منها. طالع وثائق كل مكوّن لمزيد من التفاصيل.

العلاقة مع lh-ui-plus

@lh-ui/react و@lh-ui/vue3 (lh-ui-plus) من المصدر ذاته ومن البنية ذاتها:

• منطق المكوّنات متطابق تمامًا، مصدره @lh-ui/share/core، ولا تحتفظ أي من المكتبتين بنسخة منه
• الأنماط متطابقة تمامًا، مصدرها @lh-ui/share/styles، وأسماء أصناف BEM متناظرة واحدًا لواحد
• props تحمل الأسماء والدلالات نفسها، مع تطويعها وفق عادات React فقط (v-model ← value/onChange إلخ)

للترحيل من Vue طالع دليل الترحيل.

تصيير جهة الخادم (SSR)

المكوّنات آمنة لـ SSR: تُنفَّذ جميع عمليات DOM داخل useEffect / useIsomorphicLayoutEffect، ويُقدِّم useLhLocale لقطة SSR عبر useSyncExternalStore. وعند استدعاء الخدمات الحتمية (message إلخ) جهة الخادم، تُطبع تحذيرًا وتُهمَل (no-op) فقط.