React Intl adalah library populer yang menyediakan sekumpulan komponen dan utilitas untuk menginternasionalkan aplikasi React. Internasionalisasi, juga dikenal sebagai i18n, adalah proses mengadaptasi aplikasi ke berbagai bahasa dan budaya.
Anda dapat dengan mudah mendukung banyak bahasa dan lokal dalam aplikasi React Anda dengan ReactIntl.
Daftar isi
Menginstal React Intl
Untuk menggunakan pustaka React Intl, Anda harus menginstalnya terlebih dahulu. Anda dapat melakukannya dengan lebih dari satu manajer paket: npm, benang, atau pnpm.
Untuk menginstalnya dengan npm, jalankan perintah ini di terminal Anda:
npm install react-intl
Untuk menginstalnya menggunakan benang, jalankan perintah ini:
yarn add react-intl
Cara Menggunakan React Intl Library
Setelah Anda menginstal pustaka React Intl, Anda dapat menggunakan komponen dan fiturnya di aplikasi Anda. React Intl memiliki fungsi yang mirip dengan JavaScript Intl API.
Beberapa komponen berharga yang ditawarkan oleh pustaka React Intl termasuk komponen FormattedMessage dan IntlProvider.
Komponen FormattedMessage menampilkan string yang diterjemahkan dalam aplikasi Anda, sedangkan komponen IntlProvider menyediakan terjemahan dan informasi pemformatan ke aplikasi Anda.
Anda harus membuat file terjemahan sebelum dapat mulai menggunakan komponen FormattedMessage dan IntlProvider untuk menerjemahkan aplikasi Anda. File terjemahan berisi semua terjemahan untuk aplikasi Anda. Anda dapat membuat file terpisah untuk setiap bahasa dan lokal atau menggunakan satu file untuk memuat semua terjemahan.
Misalnya:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Contoh file terjemahan ini berisi dua objek terjemahan: messagesInFrench dan messagesInItalian. Anda dapat mengganti placeholder {name} dalam string salam saat runtime dengan nilai dinamis.
Untuk menggunakan terjemahan dalam aplikasi Anda, Anda harus membungkus komponen root aplikasi Anda dengan komponen IntlProvider. Komponen IntlProvider membutuhkan tiga properti React: locale, defaultLocale, dan pesan.
Prop locale menerima string yang menentukan lokal pengguna, sedangkan defaultLocale menentukan fallback jika lokal pilihan pengguna tidak tersedia. Terakhir, penyangga pesan menerima objek terjemahan.
Berikut adalah contoh yang menunjukkan bagaimana Anda dapat menggunakan IntlProvider:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
Contoh ini meneruskan fr locale, terjemahan messagesInFrench, dan default en locale ke komponen IntlProvider.
Anda dapat mengirimkan lebih dari satu lokal atau objek terjemahan, dan IntlProvider akan secara otomatis mendeteksi bahasa browser pengguna dan menggunakan terjemahan yang sesuai.
Untuk menampilkan string yang diterjemahkan dalam aplikasi Anda, gunakan komponen FormattedMessage. Komponen FormattedMessage mengambil prop id yang sesuai dengan ID pesan di objek pesan.
Komponen ini juga menggunakan prop defaultMessage dan values . Prop defaultMessage menentukan pesan fallback jika terjemahan tidak tersedia untuk lokal saat ini, sedangkan prop values memberikan nilai dinamis untuk placeholder dalam pesan yang diterjemahkan.
Misalnya:
import React from "react";
import { FormattedMessage } from "react-intl";function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}export default App;
Dalam blok kode ini, prop id dari komponen FormattedMessage menggunakan kunci salam dari objek messagesInFrench, dan prop values menggantikan placeholder {name} dengan nilai “John”.
Memformat Bilangan Dengan Komponen FormattedNumber
React Intl juga menyediakan komponen FormattedNumber yang dapat Anda gunakan untuk memformat angka berdasarkan lokal saat ini. Komponen menerima berbagai alat peraga untuk menyesuaikan pemformatan, seperti gaya, mata uang, dan digit pecahan minimum dan maksimum.
Berikut beberapa contohnya:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Percent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}export default App;
Contoh ini menggunakan komponen FormattedNumber yang menerima prop nilai yang menentukan angka yang ingin Anda format.
Dengan menggunakan penyangga gaya, Anda dapat menyesuaikan tampilan nomor yang diformat. Anda dapat menyetel prop gaya ke desimal, persen, atau mata uang.
Saat Anda menyetel penyangga gaya ke mata uang, komponen FormattedNumber memformat angka sebagai nilai mata uang menggunakan kode yang ditentukan di penyangga mata uang:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}export default App;
Komponen FormattedNumber memformat angka dalam blok kode di atas menggunakan gaya mata uang dan kode mata uang USD.
Anda juga dapat memformat angka dengan angka desimal tertentu menggunakan props minimumFractionDigits dan maximumFractionDigits.
Prop minimumFractionDigits menentukan jumlah digit pecahan minimum untuk ditampilkan. Sebaliknya, prop maximumFractionDigits menentukan jumlah digit pecahan maksimum.
Jika suatu angka memiliki digit pecahan lebih sedikit dari minimumFractionDigits yang ditentukan, React Intl akan mengisinya dengan nol. Jika angka memiliki lebih banyak digit pecahan daripada maximumFractionDigits yang ditentukan, pustaka akan membulatkan angka ke atas.
Berikut adalah contoh yang menunjukkan bagaimana Anda dapat menggunakan alat peraga ini:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}export default App;
Memformat Tanggal Dengan Komponen FormattedDate
Anda dapat memformat tanggal dengan cara yang konsisten dan mudah dibaca menggunakan React Intl. Komponen FormattedDate menyediakan cara sederhana dan efektif untuk memformat tanggal. Cara kerjanya mirip dengan pustaka tanggal-waktu yang memformat tanggal, seperti Moment.js.
Komponen FormattedDate membutuhkan banyak properti, seperti nilai, hari, bulan, dan tahun. Prop nilai menerima tanggal yang ingin Anda format, dan prop lainnya mengonfigurasi pemformatannya.
Misalnya:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}export default App;
Dalam contoh ini, prop nilai menggunakan tanggal saat ini. Selain itu, dengan menggunakan alat peraga hari, bulan, dan tahun, Anda menentukan bahwa Anda ingin tahun, bulan, dan hari ditampilkan dalam format panjang.
Selain hari, bulan, dan tahun, alat peraga lain juga memformat tampilan tanggal. Berikut adalah alat peraga dan nilai yang mereka terima:
- tahun: “numerik”, “2 digit”
- bulan: “numerik”, “2 digit”, “sempit”, “pendek”, “panjang”
- hari: “numerik”, “2 digit”
- jam: “numerik”, “2 digit”
- menit: “numerik”, “2 digit”
- kedua: “numerik”, “2 digit”
- timeZoneName: “pendek”, “panjang”
Anda juga dapat menggunakan komponen FormattedDate untuk memformat dan menampilkan waktu:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}export default App;
Internasionalkan Aplikasi React Anda untuk Pemirsa yang Lebih Luas
Anda telah mempelajari cara menginstal dan menyiapkan pustaka React-Intl di aplikasi React Anda. React-intl mempermudah pemformatan nomor, tanggal, dan mata uang aplikasi React Anda. Anda dapat memformat data berdasarkan lokal pengguna menggunakan komponen FormattedMessage, FormattedNumber, dan FormattedDate.
Pengembang reaksi sering membuat kesalahan yang dapat menyebabkan konsekuensi serius. Misalnya, gagal memperbarui status dengan benar. Penting untuk menyadari kesalahan umum ini dan memperbaikinya lebih awal untuk menghindari masalah yang merugikan.
