Enumerasi / Plurialisasi

Cara Enumerasi Bekerja

Di Intlayer, enumerasi dicapai melalui fungsi enu, yang memetakan kunci tertentu ke konten yang sesuai. Kunci-kunci ini dapat mewakili nilai numerik, rentang, atau pengenal khusus. Ketika digunakan dengan React Intlayer atau Next Intlayer, konten yang tepat secara otomatis dipilih berdasarkan locale aplikasi dan aturan yang telah ditentukan.

Menyiapkan Enumerasi

Untuk menyiapkan enumerasi dalam proyek Intlayer Anda, Anda perlu membuat modul konten yang mencakup definisi enumerasi. Berikut adalah contoh enumerasi sederhana untuk jumlah mobil:

import { enu, type Dictionary } from "intlayer";

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Kurang dari minus satu mobil",
      "-1": "Minus satu mobil",
      "0": "Tidak ada mobil",
      "1": "Satu mobil",
      ">5": "Beberapa mobil",
      ">19": "Banyak mobil",
      "fallback": "Nilai cadangan", // Opsional
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

Dalam contoh ini, enu memetakan berbagai kondisi ke konten spesifik. Ketika digunakan dalam komponen React, Intlayer dapat secara otomatis memilih konten yang sesuai berdasarkan variabel yang diberikan.

Urutan deklarasi penting dalam enumerasi Intlayer. Deklarasi valid pertama adalah yang akan dipilih. Jika beberapa kondisi berlaku, pastikan mereka diurutkan dengan benar untuk menghindari perilaku yang tidak diinginkan.

Jika tidak ada fallback yang dideklarasikan, fungsi akan mengembalikan undefined jika tidak ada kunci yang cocok.

Menggunakan Enumerasi dengan React Intlayer

Untuk menggunakan enumerasi dalam komponen React, Anda dapat memanfaatkan hook useIntlayer dari paket react-intlayer. Hook ini mengambil konten yang tepat berdasarkan ID yang ditentukan. Berikut adalah contoh cara menggunakannya:

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const CarComponent: FC = () => {
  const { numberOfCar } = useIntlayer("car_count");

  return (
    <div>
      <p>
        {
          numberOfCar(0) // Output: Tidak ada mobil
        }
      </p>
      <p>
        {
          numberOfCar(6) // Output: Beberapa mobil
        }
      </p>
      <p>
        {
          numberOfCar(20) // Output: Banyak mobil
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // Output: Nilai cadangan
        }
      </p>
    </div>
  );
};

Dalam contoh ini, komponen secara dinamis menyesuaikan outputnya berdasarkan jumlah mobil. Konten yang benar dipilih secara otomatis, tergantung pada rentang yang ditentukan.

Sumber Daya Tambahan

Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:

• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer

Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan dengan berbagai framework.