@intlayer/docs 8.7.14 → 8.9.0

package/docs/en/packages/solid-intlayer/useIntlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-05-06
 title: useIntlayer Hook Documentation | solid-intlayer
 description: See how to use the useIntlayer hook for solid-intlayer package
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - solid-intlayer
   - useIntlayer
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Unified documentation for all exports"
@@ -25,7 +28,7 @@ history:
 
 # useIntlayer Hook Documentation
 
-The `useIntlayer` hook allows you to retrieve localized content from a dictionary using its key. In Solid, this hook returns a reactive **accessor** function that updates whenever the locale changes.
+The `useIntlayer` hook allows you to retrieve localized content from a dictionary using its key. In Solid, this hook returns reactive content that updates whenever the locale changes.
 
 ## Usage
 
@@ -37,8 +40,8 @@ const MyComponent = () => {
 
   return (
     <div>
-      <h1>{content().title}</h1>
-      <p>{content().description}</p>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
     </div>
   );
 };
@@ -50,7 +53,7 @@ The hook performing the following tasks:
 
 1. **Locale Detection**: It uses the current locale from the `IntlayerProvider` context.
 2. **Dictionary Injection**: it automatically injects the content of the dictionary corresponding to the provided key, using the optimized declarations generated by the Intlayer compiler.
-3. **Reactivity**: It returns a Solid accessor (`Accessor<T>`) that automatically re-evaluates when the global locale state changes.
+3. **Reactivity**: It returns reactive content that automatically updates when the global locale state changes.
 4. **Translation Processing**: it resolves the content based on the detected locale, processing any `t()`, `enu()`, etc., definitions found within the dictionary.
 
 ## Parameters
@@ -60,4 +63,4 @@ The hook performing the following tasks:
 
 ## Returns
 
-An accessor function (`() => Content`) that returns the localized content.
+Reactive content.

package/docs/en-GB/dictionary/plurial.md

@@ -0,0 +1,230 @@
+---
+createdAt: 2026-05-04
+updatedAt: 2026-05-04
+title: Plural
+description: Discover how to declare and use locale-aware plural content (CLDR-based) in your multilingual website. Follow the steps in this online documentation to set up your project in a few minutes.
+keywords:
+  - Plural
+  - Pluralisation
+  - CLDR
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - plural
+history:
+  - version: 8.8.0
+    date: 2026-05-04
+    changes: "Init history"
+---
+
+# Plural Content / Plural in Intlayer
+
+## How Plural Works
+
+In Intlayer, plural content is achieved through the `plural` function, which maps CLDR plural categories, `zero`, `one`, `two`, `few`, `many`, `other`, to their corresponding content. The correct category is selected automatically based on the active locale and a count value, using the platform's built-in [`Intl.PluralRules`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) API.
+
+Unlike [`enu`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/enumeration.md), which selects content based on numeric ranges you define yourself, `plural` delegates the selection to CLDR rules. This is what makes it scalable to languages with complex pluralisation rules, such as Russian, Polish, Arabic, or Welsh, without having to hand-write modulo logic.
+
+## When to Use `plural` vs `enu`
+
+| Use case                                                                  | Helper   |
+| ------------------------------------------------------------------------- | -------- |
+| Locale-aware grammatical plural forms (one apple / two apples / 5 apples) | `plural` |
+| Custom numeric ranges (`<5`, `>=10`) or non-CLDR buckets                  | `enu`    |
+
+If you only target English (which has just `one` / `other`), either works. For any language with `few` / `many` / `two` distinctions, prefer `plural`.
+
+## Setting Up Plural Content
+
+To set up plural content in your Intlayer project, create a content module that uses the `plural` helper. The `other` category is required and is used as the fallback when a locale doesn't define a more specific category.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      ru: plural({
+        one: "{{count}} вакансия",
+        few: "{{count}} вакансии",
+        many: "{{count}} вакансий",
+        other: "{{count}} вакансий",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "ru": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} вакансия",
+            "few": "{{count}} вакансии",
+            "many": "{{count}} вакансий",
+            "other": "{{count}} вакансий"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> The supported categories are `zero`, `one`, `two`, `few`, `many`, `other`. You only need to declare the categories your target language uses, Intlayer falls back to `other` when no specific category matches.
+>
+> The `{{count}}` placeholder is automatically replaced with the count you pass at runtime. You can include other placeholders too (see [Custom placeholders](#custom-placeholders) below).
+
+## Using Plural Content with React Intlayer
+
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* In English:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+You can call the returned function in two equivalent ways:
+
+```tsx
+totalOpenings(21); // shorthand: count only
+totalOpenings({ count: 21 }); // explicit form
+```
+
+## Custom placeholders
+
+Plural strings can include placeholders other than `{{count}}`. Pass them in the object form alongside `count`:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, type Dictionary } from "intlayer";
+
+const inboxContent = {
+  key: "inbox_summary",
+  content: {
+    summary: plural({
+      one: "{{name}}, you have {{count}} new message",
+      other: "{{name}}, you have {{count}} new messages",
+    }),
+  },
+} satisfies Dictionary;
+
+export default inboxContent;
+```
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+const { summary } = useIntlayer("inbox_summary");
+
+summary({ count: 1, name: "Alice" });
+// → "Alice, you have 1 new message"
+
+summary({ count: 7, name: "Alice" });
+// → "Alice, you have 7 new messages"
+```
+
+## CLDR Categories at a Glance
+
+Different languages use different subsets of the CLDR categories. A few common cases:
+
+| Language           | Categories used                              |
+| ------------------ | -------------------------------------------- |
+| English (`en`)     | `one`, `other`                               |
+| French (`fr`)      | `one`, `many`, `other`                       |
+| Russian (`ru`)     | `one`, `few`, `many`, `other`                |
+| Polish (`pl`)      | `one`, `few`, `many`, `other`                |
+| Arabic (`ar`)      | `zero`, `one`, `two`, `few`, `many`, `other` |
+| Japanese / Chinese | `other` only                                 |
+
+You don't need to memorise this, declare the categories you have translations for, and Intlayer will fall back to `other` when needed.
+
+## Limitation
+
+In comparison to other nodes, `plural` cannot be imbricated with children nodes yet.
+
+Example:
+
+Valid:
+
+```ts
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+    }),
+```
+
+Invalid:
+
+```ts
+totalOpenings: plural({
+  one: {
+    en: "{{count}} opening",
+    fr: "{{count}} offre",
+  },
+  other: {
+    en: "{{count}} openings",
+    fr: "{{count}} offres",
+  },
+}),
+```
+
+## Additional Resources
+
+For more detailed information on configuration and usage, refer to the following resources:
+
+- [Enumeration Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/enumeration.md)
+- [Insertion Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/insertion.md)
+- [Intlayer CLI Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/index.md)
+- [React Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_create_react_app.md)
+- [Next Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nextjs_15.md)
+
+These resources offer further insights into the setup and usage of Intlayer across various environments and frameworks.

package/docs/en-GB/intlayer_with_adonisjs.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: AdonisJS i18n - How to translate an AdonisJS app in 2026
 description: Discover how to make your AdonisJS backend multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -16,9 +16,12 @@ slugs:
   - adonisjs
 applicationTemplate: https://github.com/aymericzip/intlayer-adonis-template
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.0.0
     date: 2025-12-30
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your AdonisJS backend website using Intlayer | Internationalisation (i18n)

package/docs/en-GB/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Analog i18n - How to translate an Analog app in 2026
 description: Discover how to make your Analog app multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -17,9 +17,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-analog-template
 applicationShowcase: https://intlayer-analog-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.0.4
     date: 2026-01-26
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Analog (Angular) app using Intlayer | Internationalisation (i18n)

package/docs/en-GB/intlayer_with_angular.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Angular i18n - How to translate an Angular app in 2026
 description: Discover how to make your Angular website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -16,6 +16,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
 applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.0.0
     date: 2026-01-26
     changes: "Release stable version"
@@ -24,7 +27,7 @@ history:
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Angular website using Intlayer | Internationalisation (i18n)

package/docs/en-GB/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Astro i18n Translation - How to translate an Astro application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Added init command"

package/docs/en-GB/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Lit i18n - How to translate an Astro + Lit application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Lit site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Lit"
@@ -269,6 +272,14 @@ const { greeting } = getIntlayer("lit-demo", locale);
 </script>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >

package/docs/en-GB/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Preact i18n - How to translate an Astro + Preact application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Preact site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Preact"
@@ -264,6 +267,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >

package/docs/en-GB/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + React i18n - How to translate an Astro + React application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + React site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Added init command"
@@ -264,6 +267,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >

package/docs/en-GB/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Solid i18n - How to translate an Astro + Solid application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Solid site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Solid"
@@ -260,6 +263,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >
@@ -282,7 +293,7 @@ function App() {
 
   return (
     <div>
-      <h1>{content().title}</h1>
+      <h1>{content.title}</h1>
       <LocaleSwitcher />
     </div>
   );
@@ -299,7 +310,7 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > The `locale` prop is passed from the Astro page (server detection) to `IntlayerProvider`, making it the initial language for all Solid primitives within the tree.
 
-> In Solid, `useIntlayer` returns an **accessor** function (e.g. `content()`). You must invoke it to access the reactive content.
+> In Solid, `useIntlayer` returns an **accessor** function (e.g. `content.). You must invoke it to access the reactive content.
 
 ### Step 7: Add a Language Switcher
 

package/docs/en-GB/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Svelte i18n - How to translate an Astro + Svelte application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Svelte site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Svelte"
@@ -260,6 +263,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >

package/docs/en-GB/intlayer_with_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Vanilla JS i18n - How to translate an Astro + Vanilla JS application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Vanilla JS site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Vanilla JS"
@@ -284,6 +287,14 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 </html>
 ```
 
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Note on routing setup:**
 > The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:
 >

package/docs/en-GB/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Vue i18n - How to translate an Astro + Vue application in 2026
 description: Learn how to add internationalisation (i18n) to your Astro + Vue site with Intlayer. Follow this guide to make your site multilingual.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Initial documentation for Astro + Vue"

package/docs/en-GB/intlayer_with_create_react_app.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Create React App i18n - How to translate an React app in 2026
 description: Discover how to make your Create React App (CRA) website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
@@ -17,12 +17,15 @@ slugs:
   - create-react-app
 applicationTemplate: https://github.com/aymericzip/intlayer-react-cra-template
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Create React App website using Intlayer | Internationalization (i18n)
@@ -293,10 +296,12 @@ const App: FC = () => (
 export default App;
 ```
 
-> Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
+> Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 >
 > To learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).

package/docs/en-GB/intlayer_with_express.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Express i18n - How to translate an Express app in 2026
 description: Discover how to make your Express backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
@@ -16,12 +16,15 @@ slugs:
   - express
 applicationTemplate: https://github.com/aymericzip/intlayer-express-template
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Express backend using Intlayer | Internationalization (i18n)