# Translated

The `Translated` component is a component that allows you to translate text in your components. You can use this component to provide translations for your components.

### Props <a href="#props-4" id="props-4"></a>

#### value `string` <a href="#value-string" id="value-string"></a>

The translation key that is used to look up the translation in the translations object.

#### options `Record<string, string | number>?` <a href="#options-recordstring-string--number" id="options-recordstring-string--number"></a>

An object that contains the options that are used to format the translation. This prop is optional, and it defaults to an empty object.

### Example <a href="#example-2" id="example-2"></a>

```jsx
<FirmhouseCartProvider translations={{
  en: {
    orderSummary: {
      tax: "Tax: {amount}",
    },
  },
}} ...>
  <Translated value="orderSummary.tax" options={{amount: 100}}  />
</FirmhouseCartProvider>
```