Cài đặt đa ngôn ngữ cho ứng dụng React với Context API

Ly Nhan

3 years 5 min read

Trong bài viết này mình chỉ sử dụng React Context API để build đa ngôn ngữ cho React app, dynamic load các packages ngôn ngữ mà không cần dùng bất cứ thư viện nào. LET'S GO ??????

Cài đặt

Mình sẽ cho bạn một công thức siêu đỉnh, chỉ với 4 bước là có thể cài đặt thành công bộ chuyển ngổi ngôn ngữ cho React app.

1. Khởi tạo assets

Ở đây mình chỉ làm mẫu Tiếng Anh (en) và Tiếng Việt (vi):

const assets = {
    vi: {
        header:'Đây là header nè mọi người',
        button:'Nhấp tui',
        lable:'Đây là button'
    },
    en: {
        header:'this is header',
        button:'click me',
        lable:'this is button'
    }
}

2. Khởi tạo Context:

import {createContext, useContext} from 'react'

// assets
//...

export const defaultContext={
    selectLanguage:'vi',
    assets,
}
export const LanguageContext = createContext(defaultContext)

export function useLanguageContext() {
    return useContext(LanguageContext)
}

3. Implement ContextProvider:

4. Wrap LanguageProvider tại root component

Này mình sử dụng app code và structure của create-react-app để demo, thực ra không cần wrap LanguageProvider tại root components, theo tính chất của context là những components nằm trong Provider có thể sử dụng được context nên các ban wrap lại ở đâu cũng được, miễn là những component sử dụng Context đều nằm dưới LanguageProvider.

Yeah xong rồi đó. Giờ mình sẽ implement tại component Home thử nha ?

import React from "react";
import { useLanguageContext } from "../LanguageContext/Context";

const Home = (props) =&gt; {
  const { state, setState } = useLanguageContext();
  const { assets, selectLanguage } = state;
 //implement
//.....
};
export default Home;

Component Home nằm dưới LanguageProvider nên có thể sử dụng ContextLanguage.

Props value có 2 field là state và setState, nên useLanguageContext sẽ trả về 2 giá trị này. field state sẽ chứa giá trị assets và selectLanguage, hàm setState dùng để chuyển đổi ngôn ngữ . Lưu ý là asset ở đây không nhất thiết phải khai báo và đẩy vào Context, bạn có thể khai báo tại component cũng được, quan trọng ở đây là field selectLanguage bắt buộc phải đưa vào Context vì khi ngôn ngữ thay đổi, chúng ta phải set lại Context để thực hiện lại việc re-render toàn bộ app.

Không thể đơn giản hơn phải không nè. Let see how it worked.

Split and dynamic load language packages

Trong một app thì số lượng text rất lớn, và rất nhiều page nữa. Nếu tải một lần sẽ làm tăng thời gian load app. Nên mình sẽ thiết kế lại chút xíu để khi user thực hiện việc chuyển đổi ngôn ngữ, lúc đó mình mới tải gói package ngôn ngữ đó xuống. Default language packages của mình bây giờ chỉ còn Tiếng Việt (vi):

Còn ngôn ngữ Tiếng Anh thì mình sẽ nhét vào public/languages/en.json, xíu nữa mình sẽ giải thích vì sao mình để đây.

Mình sẽ implement lại hàm useLanguageContext:

Lúc này khi setLanguage, mình phải kiểm tra nếu gói ngôn ngữ chưa được tải xuống, mình sẽ thực hiện một request để tải về và set lại selectLanguage.

Sử dụng hook useLanguageContext tại component Home:

Yeah, test thử xem có work không nha ?

Kết bài

Trong quá trình làm và research mình thấy có rất nhiều thư viện để support việc quản lý ngôn ngữ, thực sự mình chưa thấy việc cần thiết phải apply thư viện gì vào trong khi việc cài đặt multiple language bằng React Context API thật sự rất đơn giản.

Cảm ơn các bạn đã đọc hết bài. Đừng tiếc một like cho mình nếu các bạn thấy bài viết này có ý nghĩa nha vì nó sẽ là động lực để mình viết những bài tiếp theo.