(Dogoo Team) Ngành phần mềm luôn đi đầu trong xu thế toàn cầu hóa. Cách tốt nhất để giúp sản phẩm của bạn tiếp cận nhiều người dùng nhất có thể là thêm hỗ trợ đa ngôn ngữ. Bài viết này sẽ giúp bạn.
Chuẩn bị cài đặt
Cài đặt ví dụ react:
npx create-react-app i18n-example
cd i18n-example
Cài react-i18n package:
Với npm:
npm install react-i18next i18next i18next-http-backend --save
Với yarn:
yarn add react-i18next i18next i18next-http-backend
CDN:
https://unpkg.com/react-i18next/react-i18next.js
https://unpkg.com/react-i18next/react-i18next.min.js
Áp dụng
Đầu tiên, bạn cần bắt đầu tạo folder locale, folder này sẽ chứa phần dịch văn bản theo các ngôn ngữ. Trong ví dụ này, chúng ta sẽ dùng 2 ngôn ngữ là tiếng Anh và tiếng Việt, nên ta sẽ tạo 2 folder nhỏ là en và vi. Trong 2 folder en và vi, tạo file translation.json với nội dung dưới đây:
- folder en:
{
"content": {
"functional": "Functional",
"class": "Class",
"text": "This is text"
}
}
- folder vi:
{
"content": {
"functional": "Hàm",
"class": "Lớp",
"text": "Đây là văn bản"
}
}
Sau đó, hãy tạo folder translation chứa file i18n.js. Import những phần ngôn ngữ dịch cho trang và init i18next vào file i18n.js như dưới đây:
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
import translationEN from '../locales/en/translation';
import translationVI from '../locales/vi/translation';
// the translations
const resources = {
en: {
translation: translationEN
},
vi: {
translation: translationVI
}
};
i18n
.use(Backend)
.use(initReactI18next)
.init({
resources,
fallbackLng: 'vi',
debug: true,
interpolation: {
escapeValue: false // not needed for react as it escapes by default
}
});
export default i18n;
Cuối cùng, dùng <I18nextProvider /> để có thể sử dụng prop i18n qua context API:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import i18n from './translation/i18n';
import { I18nextProvider } from 'react-i18next';
ReactDOM.render(
<React.StrictMode>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Tiếp theo, bạn cần tạo folder components trong folder src. Bên trong folder components ta tạo tiếp 2 folder là Class và Functional và 1 file Header.js. Bên trong folder Class, ta tạo file index.js và bên trong folder Functional ta tạo file index.js. Nội dung thư mục của chúng ta sẽ như sau:
Vậy là quá trình setup các package đã xong. Package react-i18next sẽ hỗ trợ chúng ta khá nhiều cách sử dụng instance phía bên trong component:
- Sử dụng hook useTranslation trong file index.js trong folder Functional:
import React from 'react'
import { useTranslation } from 'react-i18next';
const Functional = () => {
const { t } = useTranslation()
return (
<div className="col-md-6">
<div className="card p-2">
<div className="card-body">
<h5 class="card-title">{t('content.functional')}</h5>
</div>
</div>
</div>
)
}
export default Functional
- Sử dụng HOC withTranslation trong file index.js trong folder Class:
import React from 'react'
import { withTranslation } from 'react-i18next';
class ClassComponent extends React.Component {
render() {
const { t } = this.props
return (
<div className="col-md-6">
<div className="card p-2">
<div className="card-body">
<h5 class="card-title">{t('content.class')}</h5>
</div>
</div>
</div>
)
}
}
export default withTranslation()(ClassComponent)
- Sử dụng Trans Components:
import React from 'react'
import { Trans } from 'react-i18next';
const Functional = () => {
return (
<div className="col-md-6">
<div className="card p-2">
<div className="card-body">
<Trans i18nKey='content.text' />
</div>
</div>
</div>
)
}
export default Functional
- Sử dụng Translation (render prop):
import React from 'react'
import { Translation } from 'react-i18next';
const Functional = () => {
return (
<div className="col-md-6">
<div className="card p-2">
<div className="card-body">
<Translation>
{
(t, { i18n }) => <p>{t('content.text')}</p>
}
</Translation>
</div>
</div>
</div>
)
}
export default Functional
Dogoo Team