Autor:
    Aymeric PINEAU
    Creación:2026-09-19Última actualización:2026-09-19

    Documentación del hook useLocale

    El hook useLocale de remix-intlayer proporciona acceso a la locale de la solicitud HTTP que se está procesando actualmente, junto con la locale predeterminada y las locales disponibles configuradas en el proyecto.

    Uso

    En un componente de Remix (por ejemplo, un selector de idioma):

    src/components/LocaleSwitcher.tsx
    import { type FC } from "react";
import { Link } from "@remix-run/react";
import { useLocale } from "remix-intlayer";
import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";

export const LocaleSwitcher: FC = () => {
  const { locale, availableLocales } = useLocale();
  const pathWithoutLocale = getPathWithoutLocale();

  return (
    <nav>
      <ul>
        {availableLocales.map((localeItem) => (
          <li key={localeItem} className="p-1">
            <Link
              href={getLocalizedUrl(pathWithoutLocale, localeItem)}
              aria-current={localeItem === locale ? "page" : undefined}
            >
              {localeItem.toUpperCase()}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

    En un controlador de ruta:

    src/server.ts
    import { createRouter } from "remix/router";
import { intlayer, useLocale } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/locale-info", () => {
  const { locale, defaultLocale, availableLocales } = useLocale();

  return Response.json({
    locale,
    defaultLocale,
    availableLocales,
  });
});

    Valores de retorno

    El hook devuelve un objeto de tipo UseLocaleResult:

    PropiedadTipoDescripción
    localeDeclaredLocalesLa locale resuelta para la solicitud actual.
    defaultLocaleDeclaredLocalesLa locale de respaldo predeterminada configurada en intlayer.config.ts.
    availableLocalesDeclaredLocales[]Matriz de todas las locales disponibles configuradas en intlayer.config.ts.

    Descripción

    1. Resolución con alcance de solicitud: En una solicitud activa procesada por el middleware intlayer(), useLocale lee la locale resuelta desde el almacenamiento de solicitudes.
    2. Respaldo limpio: Si se llama fuera de un contexto de solicitud (como durante scripts de inicialización o pruebas unitarias), recurre por defecto a la defaultLocale configurada.

    Documentación relacionada

    useIntlayervite-intlayer