React js — Lokalisasi(localization) Bahasa Dengan React-i18next

react + i18next

Ketika mengunjungi suatu website mungkin pernah menemui website dengan fitur untuk pilihan beberapa bahasa untuk konten website tersebut. Istilah website / aplikasi dengan fitur pemilihan bahasa tersebut dalam dunia software development disebut dengan internationalization(i18n dan localization(l10n).

Pada blog kali ini akan membahas bagaimana menggunakan lokalisasi pada sebuah aplikasi ReactJs dengan menggunkan library i18next, library i18next ini mendukung pada banyak framework/library terutama salah satunya pada react js.

framework/library yang support dengan i18next

Persiapan Project

Clone project react yang sudah disiapkan dengan menjalankan perintah

git clone https://github.com/rahulsya/react-multilanguage.git

Ganti branch project ke starter-project dengan menjalankan perintah

git checkout starter-project Dan jalankan perintah npm install dan npm start.

Instalasi dan konfigurasi library i18next

Pertama perlu menambahkan library i18next dan react-i18next pada project dengan menjalakan perintah

npm install react-i18next i18next

library i18next sendiri adalah (core)library utama yang menyediakan fungsi — fungsi translasi , sedangkan react-i18next digunakan untuk mendukung penggunaan fungsi translasi pada react seperti salah satunya hooks.

Membuat File konfigurasi i18next dengan nama i18n.js pada src/i18n.js

Selanjutnya Menambahkan library i18next-http-backend dan i18next-browser-languagedetector, Dengan menjalankan perintah

npm install i18next-http-backend i18next-browser-languagedetector

i18next-http-backend digunakan untuk mengambil data/file translasi dari server, pada project ini secara default file translasi akan disimpan pada folder public/locales/<language_code>/translation.json

i18next-browser-languagedetector digunakan untuk menyimpan dan mendetaksi bahasa yang sedang digunakan oleh user pada web berdasarkan localstorage ,cookie dll.

Selanjutnya lengkapi file i18n.js yang telah dibuat seperti code dibawah.

Import file i18n.js pada file index.js yang terletak pada folder src/index.js

Serta tambahahkan loader Suspense dengan component text loading…, dengan menambahkan loader untuk mencegah terjadinya error pada saat pertama kali render, dikarenakan i18next melakukan load konfigurasi file translasi pada saat pertama kali render aplikasi.

berikut kode akhir pada file index.js

Membuat File Translasi

Buat File dan folder translasi dengan nama file translation.json pada folder public/locales/<language_code>/translation.json

path file translasi

Bentuk format translasi untuk bahasa indonesia pada file yang terletak di foder locales/id/translation.json

translation bahasa indonesia

Bentuk format translasi untuk bahasa inggris pada file yang terletak di foder locales/en/translation.json

Translasi bahasa inggris

Menampilkan Konten Translasi

Untuk melakukan translasi dapat menggunakan fungsi hooks yang disediakan oleh react-i18next yaitu useTranslation dan fungsi t untuk translasi content dari file translation.json

Buka file App.js pada folder src/app.js lalu tambahkan seperti kode dibawah

Menampilkan kontent translasi pada file Navigation.js yang terletak pada folder src/components/Navigation.js

Membuat Fungsi Ganti Bahasa & menyimpan kode bahasa

untuk melakukan ganti bahasa dapat menjalankan fungsi i18n.changeLanguage(code bahasa) untuk kode bahasa sendiri dibuat berdasarkan nama folder yang terletak pada public/locales yaitu nama folder en dan id.

Tambahkan kode pada file navigation.js

Selanjutnya Membuat kontent/format bahasa tidak berubah ketika page direfresh setelah melakukan perubahan bahasa, dengan cara menyimpan kode bahasa-nya pada storage browser benama localstorage.

mengunakan localstorage dikarenakan berdasarkan detection option yang dibat pada file i18n.js

key yang tersimpan pada localstorage bernama “i18nextLng” nama tersebut juga disesuikan dengan lookupLocalStorage pada file i18n.js

key dan value pada localstorage

Lengkapi kode pada file navigation.js bedasarkan kode dibawah

Berikut hasil tampilan akhir penggunaan library i18next pada aplikasi react.js

Penutup

Itulah contoh penggunaan localization dengan menggunakan library i18next pada aplikasi react js . untuk lebih lanjut dapat membaca dokumentasinya sebagai referensi tambahan .

Introduction

GitHub - i18next/i18next-browser-languageDetector: language detector used in browser environment…

GitHub - i18next/i18next-http-backend: i18next-http-backend is a backend layer for i18next using in…

Step by step guide

Untuk repository projectnya dapat dicek pada github.com/rahulsya

Link Repo : https://github.com/rahulsya/react-multilanguage