เริ่มต้นกับ React
ติดตั้ง glotstack ด้วย yarn
yarn install glotstack
เพิ่ม glotstack provider ลงในแอป React ของคุณ
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // ใช้ fetch() จากไดเรกทอรีแบบคงที่เพื่อลดขนาดบันเดิล คุณจะต้องบันทึกคำแปลลงในตำแหน่งที่แน่นอน
  return fetch(`/public/translations/${locale}.json`)
}
// // หรือใช้ inline require สำหรับคำแปลในตัว — ใช้งานได้แม้ไม่มีการสนับสนุน dynamic import
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}
เมื่อไหร่ควรใช้ fetch หรือ import?
fetch() ดึงไฟล์จากที่เก็บแบบสถิตที่คุณโฮสต์ได้ทุกที่ เช่น CDN - ช่วยให้ขนาดบันเดิลเล็กลงหากมีข้อจำกัด เช่น Cloudflare Workers fetch() มักดีกว่า ถ้าสภาพแวดล้อมไม่รองรับ dynamic import ให้ใช้ require() แม้จะมีบูร์เลอร์เพลตมากขึ้น แอปเล็กหรือ react-native แนะนำให้ใช้ require() เพื่อบิลด์ไฟล์เข้าไปในบันเดิลโฮสต์
useGlotstack() ภายในคอมโพเนนต์ของคุณ
import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}
สร้างไฟล์ต้นทางคำแปลของคุณ
คุณสามารถใช้ภาษาท้องถิ่นของคุณ แต่ Glotstack จะตั้งค่าเริ่มต้นเป็น en-US.json เราขอแนะนำให้วางไว้ในตำแหน่งเช่น ./translations/en-US.json หากคุณกังวลเกี่ยวกับขนาดบันเดิล ให้ลดขนาดโดยการแยกไฟล์สาธารณะเช่น ./public/translations/en-US.json
ใหม่
ไม่ชอบแก้ไข JSON?
ลองเขียนไฟล์คำแปลเป็น YAML (เราก็ใช้แบบนี้!)การแปล i18n ด้วย YAML
รับคำแปล
ตัวเลือก 1
: สร้าง .glotstack.json ในโปรเจกต์ของคุณ
คุณสามารถใช้ API key ที่ให้มาใน config ได้ คุณจะสามารถแปลได้ 10 ครั้งก่อนที่จะต้องสมัครสมาชิก
รัน get-translations
yarn glotstack get-translations
เร็วๆ นี้! คำแปลสดผ่าน yarn glotstack live-translate
ตัวเลือก 2:
ใช้ CLI เพื่อดึงคำแปลของคุณ
export GLOTSTACK_API_KEY="q30NRNhCu4yWFswZYNfJzc3aou1w2VSaWukLHlshRU5xL1h1uYOZUUybgehT8QSgAL0PJGEE0GaulZu+08xOkw==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
การใช้เทอร์มินัลก็ทำได้! แต่ตัวเลือกอาจเปลี่ยนบ่อย การเพิ่ม codemod สำหรับ config ของคุณจะง่ายกว่าการอัปเดตคำสั่งที่บันทึกไว้
© 2026 Glotstack.ai สงวนลิขสิทธิ์
Glotstack คือเวิร์กโฟลว์ localization ที่เน้นนักพัฒนาสำหรับ React: จัดการคำแปลใน YAML/JSON, ซิงค์ locale และส่งมอบภาษารวดเร็วขึ้นด้วยเครื่องมือช่วย AI