Konten Penyisipan / Penyisipan di Intlayer

Cara Kerja Penyisipan

Di Intlayer, konten penyisipan dicapai melalui fungsi insertion, yang mengidentifikasi bidang placeholder dalam sebuah string (seperti {{name}} atau {{age}}) yang dapat diganti secara dinamis saat runtime. Pendekatan ini memungkinkan Anda membuat string yang fleksibel seperti template di mana bagian tertentu dari konten ditentukan oleh data yang dikirim dari aplikasi Anda.

Saat diintegrasikan dengan React Intlayer atau Next Intlayer, Anda cukup menyediakan objek data yang berisi nilai untuk setiap placeholder, dan Intlayer akan secara otomatis merender konten dengan placeholder yang sudah diganti.

Menyiapkan Konten Penyisipan

Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten yang mencakup definisi penyisipan Anda. Berikut adalah contoh dalam berbagai format.

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert(      "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!"    ),  },} satisfies Dictionary;export default myInsertionContent;

Menggunakan Konten Insertion dengan React Intlayer

Untuk memanfaatkan konten insertion dalam sebuah komponen React, impor dan gunakan hook useIntlayer dari paket react-intlayer. Hook ini mengambil konten untuk kunci yang ditentukan dan memungkinkan Anda untuk mengirimkan sebuah objek yang memetakan setiap placeholder dalam konten Anda ke nilai yang ingin Anda tampilkan.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Output: "Halo, nama saya John dan saya berumur 30 tahun!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* Anda dapat menggunakan kembali insertion yang sama dengan nilai yang berbeda */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

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 menawarkan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan framework.