Select Content / Intlayer

How Select Works

In Intlayer, select content is achieved through the select function, which maps arbitrary string values to their corresponding content. It is the equivalent of the ICU {value, select, …} message, or similar to a switch statement in your application's code.

Use select when the discriminant is an arbitrary string: such as a status, a plan, a platform, or a role. For other discriminants, Intlayer provides dedicated nodes:

Setting Up Select Content

To set up select content in your Intlayer project, create a content module that includes your select definitions. Below are examples in different formats.

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

const myPostContent = {
  key: "my_key",
  content: {
    publishStatus: select({
      draft: "This post is a draft",
      published: "This post is live",
      scheduled: "This post is scheduled",
      fallback: "Unknown status", // optional
    }),
  },
} satisfies Dictionary;

export default myPostContent;

If no fallback is declared, the last declared key is considered as the fallback if the provided value does not match any of the declared cases: exactly the same as for cond() and gender() contracts.

Type Safety

The accepted argument is inferred from the declared cases:

• Without a fallback, only the declared cases are accepted: a typo will result in a type error.
• With a fallback, any string is accepted (as the fallback covers unmatched values), whilst the declared cases still provide autocomplete.

Why not use a regular object?

It could be tempting to declare a regular object and index it with the runtime value:

// ❌ Do not do this
const { publishStatus } = useIntlayer("my_key");

return <p>{publishStatus[publishType]}</p>;

The Intlayer compiler parses your source code to eliminate unused content and minify the remaining keys. A dynamically computed access (obj[expr]) cannot be resolved statically, hence the entire branch is marked as opaque: it will be kept in the bundle, and its keys will not be minified.

By using select(), the case resolution happens inside a function call rather than a property access. The compiler sees it as a single, static field access and properly optimises the node exactly as it does for enu(), cond(), or gender():

// ✅ Do this
const { publishStatus } = useIntlayer("my_key");

return <p>{publishStatus(publishType)}</p>;

Using Select Content

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

const PostStatus: FC = () => {
  const { publishStatus } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Output: This post is a draft */
          publishStatus("draft")
        }
      </p>
      <p>
        {
          /* Output: This post is live */
          publishStatus("published")
        }
      </p>
      <p>
        {
          /* Output: Unknown status */
          publishStatus("Archived")
        }
      </p>
    </div>
  );
};

export default PostStatus;

"use client";

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

const PostStatus: FC = () => {
  const { publishStatus } = useIntlayer("my_key");

  return (
    <div>
      <p>{publishStatus("draft")}</p>
      <p>{publishStatus("published")}</p>
    </div>
  );
};

export default PostStatus;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { publishStatus } = useIntlayer("my_key");
</script>

<template>
  <div>
    <p>{{ publishStatus("draft") }}</p>
    <p>{{ publishStatus("published") }}</p>
  </div>
</template>

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <p>{$content.publishStatus("draft")}</p>
  <p>{$content.publishStatus("published")}</p>
</div>

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

const PostStatus: FC = () => {
  const { publishStatus } = useIntlayer("my_key");

  return (
    <div>
      <p>{publishStatus("draft")}</p>
      <p>{publishStatus("published")}</p>
    </div>
  );
};

export default PostStatus;

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

const PostStatus: Component = () => {
  const { publishStatus } = useIntlayer("my_key");

  return (
    <div>
      <p>{publishStatus("draft")}</p>
      <p>{publishStatus("published")}</p>
    </div>
  );
};

export default PostStatus;

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-post-status",
  template: `
    <div>
      <p>{{ content().publishStatus("draft") }}</p>
      <p>{{ content().publishStatus("published") }}</p>
    </div>
  `,
})
export class PostStatusComponent {
  content = useIntlayer("my_key");
}

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

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("status")!.textContent =
    newContent.publishStatus("draft");
});

// Initial render
document.getElementById("status")!.textContent = content.publishStatus("draft");

Composing Select with Other Nodes

Because each case is housing a complete content node, select can be combined with t(), insert(), md(), etc.:

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

const myPostContent = {
  key: "my_key",
  content: {
    publishStatus: select({
      draft: insert(
        t({
          en: "{{name}} saved a draft",
          "en-GB": "{{name}} saved a draft",
          fr: "{{name}} a enregistré un brouillon",
        })
      ),
      published: insert(
        t({
          en: "{{name}} published the post",
          "en-GB": "{{name}} published the post",
          fr: "{{name}} a publié l’article",
        })
      ),
      fallback: insert(
        t({
          en: "{{name}} updated the post",
          "en-GB": "{{name}} updated the post",
          fr: "{{name}} a mis à jour l’article",
        })
      ),
    }),
  },
} satisfies Dictionary;

export default myPostContent;

publishStatus("draft")({ name: "Alice" }); // Output: Alice saved a draft

Migrating from ICU select

Messages using the ICU select argument are imported as a select node:

{publishType, select, draft {draft} published {published} other {Unknown}}

Will become:

select(
  {
    draft: "draft",
    published: "published",
    fallback: "Unknown",
  },
  "publishType"
);

The ICU other case is renamed to fallback, which is the Intlayer canonical name for all catch-all cases. The second argument holds the ICU variable name so that when exported, the message reverts back to the exact same ICU string.

Please note that ICU select messages where the cases are gender values (male / female / other) are imported as a gender node instead.

Additional Resources

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

• Intlayer CLI Documentation
• Intlayer React Documentation
• Intlayer Next.js Documentation

These resources provide further insights into setting up and using Intlayer across various environments and frameworks.