Pengambilan Fungsi

Intlayer memungkinkan Anda untuk mendeklarasikan fungsi konten dalam modul konten Anda, yang dapat bersifat sinkron atau asinkron. Ketika aplikasi dibangun, Intlayer menjalankan fungsi-fungsi ini untuk mendapatkan hasil dari fungsi tersebut. Nilai yang dikembalikan harus berupa objek JSON atau nilai sederhana seperti string atau angka.

Peringatan: pengambilan fungsi saat ini tidak tersedia dalam deklarasi konten JSON dan file deklarasi konten jarak jauh.

Deklarasi Fungsi

Berikut adalah contoh pengambilan konten fungsi sinkron sederhana:

import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "This is the content rendered by a function",  },} satisfies Dictionary;export default functionContent;

Dalam contoh ini, kunci text berisi sebuah fungsi yang mengembalikan sebuah string. Konten ini dapat dirender dalam komponen React Anda menggunakan paket interpreter Intlayer seperti react-intlayer.

Pengambilan Fungsi Asinkron

Selain fungsi sinkron, Intlayer mendukung fungsi asinkron, memungkinkan Anda untuk mengambil data dari sumber eksternal atau mensimulasikan pengambilan data dengan data tiruan (mock data).

Berikut adalah contoh fungsi asinkron yang mensimulasikan pengambilan dari server:

import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Tunggu selama 200ms untuk mensimulasikan pengambilan dari server  return await setTimeout(200).then(    () => "Ini adalah konten yang diambil dari server"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

Dalam kasus ini, fungsi fakeFetch meniru penundaan untuk mensimulasikan waktu respons server. Intlayer menjalankan fungsi asinkron dan menggunakan hasilnya sebagai konten untuk kunci text.

Menggunakan Konten Berbasis Fungsi dalam Komponen React

Untuk menggunakan konten berbasis fungsi dalam komponen React, Anda perlu mengimpor useIntlayer dari react-intlayer dan memanggilnya dengan ID konten untuk mengambil konten tersebut. Berikut adalah contohnya:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* Output: Ini adalah konten yang dirender oleh sebuah fungsi */}      <p>{asyncFunctionContent.text}</p>      {/* Output: Ini adalah konten yang diambil dari server */}    </div>  );};export default MyComponent;