Skip to main content

Internationalization

tip

Existing language strings for an application can be customized for any language in the VertiGIS Studio Web Designer. To provide a complete translation in an entirely new locale for VertiGIS Studio 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 VertiGIS Studio 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