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

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;

faq.2.content.ts

コードをコピー

コードをクリップボードにコピー

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

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

コレクションの利用

すべてのアイテム

FAQ.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "react-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

import { useIntlayer } from "react-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "next-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

import { useIntlayer } from "next-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.vue

コードをコピー

コードをクリップボードにコピー

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

FAQ.svelte

コードをコピー

コードをクリップボードにコピー

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

FAQ.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "preact-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

import { useIntlayer } from "preact-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

faq.component.ts

コードをコピー

コードをクリップボードにコピー

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

faq.js

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

インデックスによる単一アイテムの取得

tsx

コードをコピー

コードをクリップボードにコピー

const faq2 = useIntlayer("faq", { item: 2 });// → { question: string; answer: string }

const faq2 = useIntlayer("faq", { item: 2 });// → { question: string; answer: string }

ロケールを明示した単一アイテムの取得

tsx

コードをコピー

コードをクリップボードにコピー

const faq2Ja = useIntlayer("faq", { item: 2, locale: "ja" });

const faq2Ja = useIntlayer("faq", { item: 2, locale: "ja" });

一般的なユースケース

FAQ（よくある質問）リスト
料金プラン
カルーセル / スライダーの画像・コンテンツ
ステップ形式のチュートリアル・説明

ロケールごとのファイル

バリアント