เพิ่ม glotstack provider ลงในแอป React ของคุณ
ง่ายเหมือนการเพิ่ม context provider ที่ระดับบนสุดของแอปของคุณเพียงครั้งเดียว
เมื่อคุณเพิ่ม context provider คำแปลจะถูกเติมโดยอัตโนมัติขึ้นอยู่กับ locale ที่คุณกำหนด
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
ดึงคำแปลของคุณตามต้องการ — ได้ตลอดเวลา
yarn glotstack get-translations
ไม่ต้องรอผู้เชี่ยวชาญภาษาอีกต่อไป ใช้ CLI ของเราเพื่อดึงคำแปลได้ทุกเมื่อที่ต้องการอัปเดต การใช้
context
ในไฟล์คำแปลช่วยให้คำแปลตรงตามเจตนา หากคุณต้องการใช้ไฟล์ yaml ดูรายละเอียดเพิ่มที่
เกี่ยวกับ yamlGlotstack ใช้ API แบบฮุกที่เรียบง่าย
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
คุณสามารถใช้ตัวเลือก assigns
เพื่อแทนที่ React.Node
ใดๆ ในคำแปลได้ ใช้การเขียน <Component>something</Component>
แบบอินไลน์ได้ตราบที่คุณส่งชื่อคอมโพเนนต์ใน assigns — ซึ่งมีประโยชน์เมื่อคุณไม่ต้องการสร้างคีย์คำแปลใหม่ คุณยังสามารถใช้การเขียน {{substitution}}
เพื่อแทนที่โหนดได้โดยตรง
YourKey:
value: |
This is an example source text. We want to <Component>do this</Component.
We also want to demonstrate {{insertNode}} and {{mdash}}.
We can even nest other translated things {{another}}.