> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Functions

## Article: Functions

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/site-settings/translations/functions.md

## Article Content:

import { Property, PropertyList, ExpandableSection, RequestResponseExamples } from "@wix/docs-ui/content";

{/* Generated by @wix/tw-typedoc-to-wix-docs from packages/site-service-translations/src/definition/index.ts. Do not edit this file directly — edit the TSDoc in the source package. */}

# Translations Functions

## getTranslations()

Retrieves every translated string in a namespace.

Use it when you need several strings at once, such as to pass a set of labels to your own code. To
retrieve a single string with a fallback, use `translate()`.

The strings can change while the page is open. Call it while a component renders, so the component
updates when they change.

Don't change the returned map. Every component on the page reads the same map, so a change shows in all
of them, and the site doesn't save it.

### Method Declaration

```ts
getTranslations(namespace: string): { [key: string]: string }
```

### Method Parameters

<PropertyList bordered>
  <Property name="namespace" type="string" required>
    Namespace of the strings. Case-sensitive, and must match the namespace exactly.
  </Property>
</PropertyList>

### Returns

<PropertyList bordered>
  <Property name="Return Type:" type="{ [key: string]: string }">
    Translated strings in the namespace.

    An empty map when the namespace has no strings.
    <ExpandableSection name="Child Properties">
      <PropertyList>
        <Property name="[key: string]" type="string">
          Translated string. The key is the string's name in its namespace.
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Examples

<RequestResponseExamples defaultName="getTranslations" requestName="JavaScript" requestType="JavaScript" examples={[
  {
    title: `Pass a component's labels to your own code`,
    content: {
      methodExample: {
        Request: `~~~tsx
import { useService } from '@wix/services-manager-react'
import { TranslationsDefinition } from '@wix/site-service-translations/definition'

// Carousel is your own component, and Product is your own type.
function ProductCarousel({ products }: { products: Product[] }) {
    const translationsService = useService(TranslationsDefinition)
    const strings = translationsService.getTranslations('ProductGallery')

    // getTranslations() has no fallback, so a missing key is undefined.
    return (
        <Carousel
            items={products}
            nextLabel={strings.nextButtonAriaLabel ?? 'Next product'}
            previousLabel={strings.previousButtonAriaLabel ?? 'Previous product'}
        />
    )
}
~~~`
      }
    }
  }
]} />

---

## translate()

Retrieves a lookup function for the translated strings in a namespace.

Call the lookup function with a key to retrieve that key's string. When the namespace has no string for
the key, it returns the fallback you specify, or the key itself when you don't specify one. A string
that's empty in the namespace is returned as is, not replaced by the fallback.

To show your own default text when there's no string, specify it as the fallback, as in
`t('nextButtonAriaLabel', 'Next product')`. Without a fallback, the lookup function returns the key, so a
default you add with `??` or `||`, as in `t('nextButtonAriaLabel') ?? 'Next product'`, isn't used for a missing
string.

The lookup function reads the current strings each time you call it, so a lookup function you keep
returns the current strings, even after they change. Call it while a component renders, so the component
updates when the strings change.

To retrieve every string in a namespace at once, use `getTranslations()`.

### Method Declaration

```ts
translate(namespace: string): TranslateByKey
```

### Method Parameters

<PropertyList bordered>
  <Property name="namespace" type="string" required>
    Namespace of the strings. Case-sensitive, and must match the namespace exactly.
  </Property>
</PropertyList>

### Returns

<PropertyList bordered>
  <Property name="Return Type:" type="TranslateByKey">
    Function that retrieves a translated string by its key. When the namespace has no string for the
    key, it returns the key itself, unless you specify a fallback.
    <ExpandableSection name="Function Parameters">
      <PropertyList>
        <Property name="key" type="string" required>
          Key of the string. Case-sensitive, and must match the key exactly.
        </Property>
        <Property name="fallback" type="string">
          String to return when the namespace has no string for `key`. An empty-string fallback is
          returned as is.
        </Property>
      </PropertyList>
    </ExpandableSection>
    <ExpandableSection name="Function Return Value">
      <PropertyList>
        <Property name="returnValue" type="string">
          Translated string.
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Examples

<RequestResponseExamples defaultName="translate" requestName="JavaScript" requestType="JavaScript" examples={[
  {
    title: `Label a button for screen readers`,
    content: {
      methodExample: {
        Request: `~~~tsx
import { useService } from '@wix/services-manager-react'
import { TranslationsDefinition } from '@wix/site-service-translations/definition'

function NextProductButton({ onClick }: { onClick: () => void }) {
    const translationsService = useService(TranslationsDefinition)
    const t = translationsService.translate('ProductGallery')

    return (
        <button aria-label={t('nextButtonAriaLabel', 'Next product')} onClick={onClick}>
            →
        </button>
    )
}
~~~`
      }
    }
  },
  {
    title: `Show a validation error`,
    content: {
      methodExample: {
        Request: `~~~tsx
import { useService } from '@wix/services-manager-react'
import { TranslationsDefinition } from '@wix/site-service-translations/definition'

function PhoneError({ isValid }: { isValid: boolean }) {
    const translationsService = useService(TranslationsDefinition)
    const t = translationsService.translate('ContactForm')

    return isValid ? null : <p role="alert">{t('invalidPhoneError', 'Enter a valid phone number')}</p>
}
~~~`
      }
    }
  }
]} />