@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/es/dictionary/enumeration.md

@@ -20,6 +20,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "Historial inicial"
+author: aymericzip
 ---
 
 # Enumeración / Plurialización
@@ -82,7 +83,198 @@ En este ejemplo, `enu` asigna varias condiciones a contenido específico. Cuando
 
 ## Uso de Enumeraciones con React Intlayer
 
-Para usar enumeraciones en un componente React, puede aprovechar el hook `useIntlayer` del paquete `react-intlayer`. Este hook recupera el contenido correcto basado en el ID especificado. Aquí hay un ejemplo de cómo usarlo:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Output: No cars
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Output: Some cars
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Output: Many cars
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Output: Fallback value
+        }
+      </p>
+    </div>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { numberOfCar } = useIntlayer("car_count");
+</script>
+
+<template>
+  <div>
+    <p>{{ numberOfCar(6) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("car_count");
+</script>
+
+<div>
+  <p>{$content.numberOfCar(6)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const CarComponent: Component = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-car",
+  template: `
+    <div>
+      <p>{{ content().numberOfCar(6) }}</p>
+    </div>
+  `,
+})
+export class CarComponent {
+  content = useIntlayer("car_count");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("car_count").onChange((newContent) => {
+  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
+});
+
+// Initial render
+document.getElementById("cars")!.textContent = content.numberOfCar(6);
+```
+
+  </Tab>
+</Tabs>
+
+## Combining Enumeration with Insert for Ordinal Numbers
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -95,22 +287,22 @@ const CarComponent: FC = () => {
     <div>
       <p>
         {
-          numberOfCar(0) // Salida: Sin coches
+          numberOfCar(0) // Output: No cars
         }
       </p>
       <p>
         {
-          numberOfCar(6) // Salida: Algunos coches
+          numberOfCar(6) // Output: Some cars
         }
       </p>
       <p>
         {
-          numberOfCar(20) // Salida: Muchos coches
+          numberOfCar(20) // Output: Many cars
         }
       </p>
       <p>
         {
-          numberOfCar(0.01) // Salida: Valor de reserva
+          numberOfCar(0.01) // Output: Fallback value
         }
       </p>
     </div>
@@ -118,14 +310,348 @@ const CarComponent: FC = () => {
 };
 ```
 
-En este ejemplo, el componente ajusta dinámicamente su salida según el número de coches. El contenido correcto se elige automáticamente, dependiendo del rango especificado.
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { numberOfCar } = useIntlayer("car_count");
+</script>
+
+<template>
+  <div>
+    <p>{{ numberOfCar(6) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("car_count");
+</script>
+
+<div>
+  <p>{$content.numberOfCar(6)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const CarComponent: Component = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-car",
+  template: `
+    <div>
+      <p>{{ content().numberOfCar(6) }}</p>
+    </div>
+  `,
+})
+export class CarComponent {
+  content = useIntlayer("car_count");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("car_count").onChange((newContent) => {
+  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
+});
+
+// Initial render
+document.getElementById("cars")!.textContent = content.numberOfCar(6);
+```
+
+  </Tab>
+</Tabs>
+
+### Using Ordinal Enumeration
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const RankingComponent: FC<{ count: number }> = ({ count }) => {
+  const { ordinal } = useIntlayer("ranking_component");
+
+  // Get the last digit to determine the correct suffix
+  const lastDigit = Math.abs(count) % 10;
+
+  return (
+    <div>
+      <p>
+        {
+          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
+        }
+      </p>
+    </div>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const RankingComponent: FC<{ count: number }> = ({ count }) => {
+  const { ordinal } = useIntlayer("ranking_component");
+  const lastDigit = Math.abs(count) % 10;
+
+  return (
+    <div>
+      <p>{ordinal(lastDigit)({ count })}</p>
+    </div>
+  );
+};
+
+export default RankingComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+defineProps<{ count: number }>();
+
+const { ordinal } = useIntlayer("ranking_component");
+</script>
+
+<template>
+  <div>
+    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+export let count: number;
+
+const content = useIntlayer("ranking_component");
+$: lastDigit = Math.abs(count) % 10;
+</script>
+
+<div>
+  <p>{$content.ordinal(lastDigit)({ count })}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const RankingComponent: FC<{ count: number }> = ({ count }) => {
+  const { ordinal } = useIntlayer("ranking_component");
+  const lastDigit = Math.abs(count) % 10;
+
+  return (
+    <div>
+      <p>{ordinal(lastDigit)({ count })}</p>
+    </div>
+  );
+};
+
+export default RankingComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const RankingComponent: Component<{ count: number }> = (props) => {
+  const { ordinal } = useIntlayer("ranking_component");
+
+  return (
+    <div>
+      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
+    </div>
+  );
+};
+
+export default RankingComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component, Input } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-ranking",
+  template: `
+    <div>
+      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
+    </div>
+  `,
+})
+export class RankingComponent {
+  @Input() count!: number;
+
+  content = useIntlayer("ranking_component");
+
+  lastDigit() {
+    return Math.abs(this.count) % 10;
+  }
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use this with `vanilla-intlayer`, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("ranking_component");
+const lastDigit = Math.abs(5) % 10;
+
+document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
+  count: 5,
+});
+```
+
+  </Tab>
+</Tabs>
 
-## Recursos Adicionales
+## Additional Resources
 
-Para obtener información más detallada sobre la configuración y el uso, consulte los siguientes recursos:
+For more detailed information on configuration and usage, refer to the following resources:
 
-- [Documentación de Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md)
-- [Documentación de React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_create_react_app.md)
-- [Documentación de Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_15.md)
+- [Intlayer CLI Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md)
+- [React Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md)
+- [Next Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_15.md)
 
-Estos recursos proporcionan información adicional sobre la configuración y el uso de Intlayer en diferentes entornos y con varios frameworks.
+These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.