Internationalization

tip

Existing language strings for an application can be customized for any language in the Geocortex Web Designer. To provide a complete translation in an entirely new locale for Geocortex Web, please contact us.

Providing Language Strings for a Component

When developing custom components, user facing language strings are sometimes introduced. If these strings need to be translated, you can register new language resource files with the appropriate translations.

Language strings can be referenced by key in a custom component and either used with a Geocortex Web layout component, which will automatically translate them, or manually translated with the translate function on the UIContext.

import React, { useContext } from "react";

import { LayoutElement } from "@vertigis/web/components";

import { UIContext } from "@vertigis/web/ui";

import Typography from "@vertigis/web/ui/Typography";

export default function ComponentWithLanguageStrings(props) {

const { translate } = useContext(UIContext);

return (

<LayoutElement {...props} style={{ backgroundColor: "white" }}>

// highlight-start // This component automatically translates the

language string.

<Typography variant="h1" text="language-some-component-string" />

// Manually translate the language key.

<h1>{translate("language-some-component-string")}</h1>

</LayoutElement>

);

}

Next Steps

Learn how to Define Language Strings

Learn how to define and register language resources

Get Started

Learn how to use Language Strings in App Config

Learn how to use built-in or custom language strings in the app config

Get Started