> 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: Introduction

## Article: Introduction

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

## Article Content:

# About the Translations API

The Translations API gives you the translated strings for your component's text, such as button labels and messages, in the language the page is shown in. Use it so your component shows translated text instead of hard-coded strings.

With the Translations API, you can:

- Retrieve a translated string by its key, with a fallback for when there's none.
- Retrieve every translated string in a namespace at once.

## Before you begin

It's important to note the following points before starting to code:

- The strings can change while the page is open, for example when a Wix user adds a component or changes the site's language in the editor. Read them while a component renders, so the component updates when they change.

## Use cases

- [Label a component for screen readers](https://dev.wix.com/docs/sdk/site-sdk/site-settings/translations/sample-flows.md)
- [Pass a set of labels to your own component](https://dev.wix.com/docs/sdk/site-sdk/site-settings/translations/sample-flows.md)

## Terminology

- **Namespace**: A named group of translated strings. A component's strings are in the namespace named after its component type.
- **Key**: The name of a translated string in its namespace.

## SDK setup

@package_metadata:@wix/site-service-translations

To use the API, install the `@wix/site-service-translations` package:

```bash
npm install @wix/site-service-translations
```

#### Import the package

```ts
import { TranslationsDefinition } from '@wix/site-service-translations/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-translations/types`:

```ts
import type { <TypeName> } from '@wix/site-service-translations/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { TranslationsDefinition } from '@wix/site-service-translations/definition'

function EmptyState() {
    const translationsService = useService(TranslationsDefinition)

    const t = translationsService.translate('ProductGallery')

    return <p>{t('emptyStateMessage', 'No products to show yet')}</p>
}
```