What is the IntlayerNode type?

The IntlayerNode<T> type is a special type provided by intlayer's packages such as next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer and vanilla-intlayer.

Example of usage

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

const appContent = {
  key: "app",
  content: {
    title: "Vite + Preact",
  },
} satisfies Dictionary;

export default appContent;

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { title } = useIntlayer("app");  return title; // returns type: IntlayerNode<string>};

Why Intlayer insert an IntlayerNode?

Intlayer insert an IntlayerNode to be able to render the visual editor Selectors in the context of the CMS / Visual Editor.

An IntlayerNode is an enriched React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla Node, but also to access the properties of the base primitive node.

For instance:

const content = useIntlayer("app");// Case of Stringcontent.title; // Returns IntlayerNode<string>content.title.value; // Returns the base content, here a stringcontent.title.toString(); // Returns stringcontent.title.toLowerCase(); // Returns stringString(content.title); // Returns stringcontent.title.toUpperCase(); // Returns uppercased stringcontent.title.replace("a", "b"); // Returns modified string// ...

Accessing the properties of an IntlayerNode will work, but will break the ability to display the selectors in the Visual Editor.

The IntlayerNode can also wrap and number, or other types such as IntlayerNode<number>