Display the current locale

You can dynamically display the currently used locale on Markdown and React pages. The following steps use the first-level heading as an example, but you can display the locale anywhere on the page.

Markdown pages

To display the current locale in Markdown pages, use the global $lang variable in a Markdoc tag, as in the following example:

# Current language: {% $lang %}

React pages

To display the current locale on React pages, use the useL10n hook by importing it from @redocly/theme/core/hooks.

import React from 'react';

import { useL10n } from '@redocly/theme/core/hooks';

export default function () {
  const { lang } = useL10n(); // access to current language
  return (
    <div>
      <h1>Current language: {lang} </h1>
    </div>
  );
}

Resources

• Learn the steps to add localization to your project in Configure localization.
• Learn how to localize your content files in Add translated content.