Nesting / Sub Content Referencing

How Nesting Works

In Intlayer, nesting is achieved through the nest function, which allows you to reference and reuse content from another dictionary. Instead of duplicating content, you can point to an existing content module by its key.

Setting Up Nesting

To set up nesting in your Intlayer project, you first define the base content that you wish to reuse. Then, in a separate content module, you use the nest function to import that content.

Base Dictionary

Below is an example of a base dictionary to nest in another dictionary:

import { type Dictionary } from "intlayer";

const firstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    content: "content",
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
  },
} satisfies Dictionary;

export default firstDictionary;

Referencing with Nest

Now, create another content module that uses the nest function to reference the above content. You can reference the entire content or a specific nested value:

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

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // References the entire dictionary:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // References a specific nested value:
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

As second parameter, you can specify a path to a nested value within that content. When no path is provided, the entire content of the referenced dictionary is returned.

Using Nesting with React Intlayer

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

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

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Full Nested Content: {JSON.stringify(fullNestedContent)}
        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Partial Nested Value: {partialNestedContent}
        {/* Output: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Additional Resources

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

• Intlayer CLI Documentation
• React Intlayer Documentation
• Next Intlayer Documentation

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