Koşullu İçerik / Intlayer'da Koşul

Koşul Nasıl Çalışır

Intlayer'da koşullu içerik, cond fonksiyonu aracılığıyla gerçekleştirilir ve belirli koşulları (genellikle boolean değerler) karşılık gelen içeriklerine eşler. Bu yaklaşım, verilen koşula göre içeriği dinamik olarak seçmenizi sağlar. React Intlayer veya Next Intlayer ile entegre edildiğinde, çalışma zamanında sağlanan koşula göre uygun içerik otomatik olarak seçilir.

Koşullu İçeriği Ayarlama

Intlayer projenizde koşullu içeriği ayarlamak için, koşullu tanımlarınızı içeren bir içerik modülü oluşturun. Aşağıda çeşitli formatlarda örnekler verilmiştir.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "doğru olduğunda içeriğim",
      false: "yanlış olduğunda içeriğim",
      fallback: "koşul başarısız olduğunda içeriğim", // İsteğe bağlı
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Eğer hiçbir fallback bildirilmezse, koşul doğrulanmazsa bildirilen son anahtar fallback olarak alınacaktır.

React Intlayer ile Koşullu İçeriği Kullanma

Bir React bileşeninde koşullu içeriği kullanmak için, react-intlayer paketinden useIntlayer hook'unu içe aktarın ve kullanın. Bu hook, belirtilen anahtar için içeriği getirir ve uygun çıktıyı seçmek için bir koşul geçmenizi sağlar.

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

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Çıktı: doğru olduğunda içeriğim */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Çıktı: yanlış olduğunda içeriğim */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Çıktı: koşul başarısız olduğunda içeriğim */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Çıktı: koşul başarısız olduğunda içeriğim */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

Ek Kaynaklar

Yapılandırma ve kullanım hakkında daha detaylı bilgi için aşağıdaki kaynaklara başvurun:

• Intlayer CLI Dokümantasyonu
• React Intlayer Dokümantasyonu
• Next Intlayer Dokümantasyonu

Bu kaynaklar, çeşitli ortamlar ve çerçevelerde Intlayer'ın kurulumu ve kullanımı hakkında daha fazla bilgi sunar.