Intlayer'da numaralandırma, enu fonksiyonu aracılığıyla gerçekleştirilir ve belirli anahtarları karşılık gelen içeriklerine eşler. Bu anahtarlar sayısal değerleri, aralıkları veya özel tanımlayıcıları temsil edebilir. React Intlayer veya Next Intlayer ile kullanıldığında, uygun içerik uygulamanın yerel ayarına ve tanımlanan kurallara göre otomatik olarak seçilir.

Numaralandırmayı Ayarlama

Intlayer projenizde numaralandırmayı ayarlamak için, numaralandırma tanımlarını içeren bir içerik modülü oluşturmanız gerekir. İşte araba sayısı için basit bir numaralandırma örneği:

**/*.content.ts

Kodu kopyala

Kodu panoya kopyala

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Eksi bir arabadan az",
      "-1": "Eksi bir araba",
      "0": "Araba yok",
      "1": "Bir araba",
      ">5": "Bazı arabalar",
      ">19": "Çok araba",
      "fallback": "Fallback değeri", // İsteğe bağlı
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

Bu örnekte, enu çeşitli koşulları belirli içeriklere eşler. Bir React bileşeninde kullanıldığında, Intlayer verilen değişkene göre uygun içeriği otomatik olarak seçebilir.

Bildirim sırası Intlayer numaralandırmalarında önemlidir. İlk geçerli bildirim alınacak olanıdır. Birden fazla koşul uygularsa, beklenmedik davranışlardan kaçınmak için doğru sıralandığından emin olun.

Eğer hiçbir fallback bildirilmezse, hiçbir anahtar eşleşmezse fonksiyon undefined döndürür.

React Intlayer ile Numaralandırmayı Kullanma

To use enumeration in a React component, you can leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

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

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

return (
  <div>
    <p>
      {
        numberOfCar(0) // Output: No cars
      }
    </p>
    <p>
      {
        numberOfCar(6) // Output: Some cars
      }
    </p>
    <p>
      {
        numberOfCar(20) // Output: Many cars
      }
    </p>
    <p>
      {
        numberOfCar(0.01) // Output: Fallback value
      }
    </p>
  </div>
);
};

To use enumeration in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

"use client";

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

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

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Kodu kopyala

Kodu panoya kopyala

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { numberOfCar } = useIntlayer("car_count");</script><template><div>  <p>{{ numberOfCar(6) }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { numberOfCar } = useIntlayer("car_count");</script><template><div>  <p>{{ numberOfCar(6) }}</p></div></template>

To use enumeration in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("car_count");</script><div><p>{$content.numberOfCar(6)}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("car_count");</script><div><p>{$content.numberOfCar(6)}</p></div>

To use enumeration in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

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

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

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Kodu kopyala

Kodu panoya kopyala

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-car",template: `  <div>    <p>{{ content().numberOfCar(6) }}</p>  </div>`,})export class CarComponent {content = useIntlayer("car_count");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-car",template: `  <div>    <p>{{ content().numberOfCar(6) }}</p>  </div>`,})export class CarComponent {content = useIntlayer("car_count");}

To use enumeration with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Kodu kopyala

Kodu panoya kopyala

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

Ek Kaynaklar

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

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

Using Ordinal Enumeration

To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");

// Get the last digit to determine the correct suffix
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>
      {
        ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
      }
    </p>
  </div>
);
};

To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

"use client";

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>{ordinal(lastDigit)({ count })}</p>
  </div>
);
};

export default RankingComponent;

To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.vue

Kodu kopyala

Kodu panoya kopyala

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { ordinal } = useIntlayer("ranking_component");</script><template><div>  <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { ordinal } = useIntlayer("ranking_component");</script><template><div>  <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p></div></template>

To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("ranking_component");$: lastDigit = Math.abs(count) % 10;</script><div><p>{$content.ordinal(lastDigit)({ count })}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("ranking_component");$: lastDigit = Math.abs(count) % 10;</script><div><p>{$content.ordinal(lastDigit)({ count })}</p></div>

To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>{ordinal(lastDigit)({ count })}</p>
  </div>
);
};

export default RankingComponent;

To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const RankingComponent: Component<{ count: number }> = (props) => {
const { ordinal } = useIntlayer("ranking_component");

return (
  <div>
    <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
  </div>
);
};

export default RankingComponent;

To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

app.component.ts

Kodu kopyala

Kodu panoya kopyala

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-ranking",template: `  <div>    <p>{{ content().ordinal(lastDigit())({ count }) }}</p>  </div>`,})export class RankingComponent {@Input() count!: number;content = useIntlayer("ranking_component");lastDigit() {  return Math.abs(this.count) % 10;}}

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-ranking",template: `  <div>    <p>{{ content().ordinal(lastDigit())({ count }) }}</p>  </div>`,})export class RankingComponent {@Input() count!: number;content = useIntlayer("ranking_component");lastDigit() {  return Math.abs(this.count) % 10;}}

To use this with vanilla-intlayer, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.ts

Kodu kopyala

Kodu panoya kopyala

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("ranking_component");
const lastDigit = Math.abs(5) % 10;

document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
count: 5,
});

Additional Resources

For more detailed information on configuration and usage, refer to the following resources:

These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.

Çoğul

Koşul