# The useT hook

Sometimes you need to translate other things than plain HTML content. For this reason Magic Translate offers the `useT` hook. You can use it eg. to translate props, like so:

```tsx
const MyComponent = () => {
    const t = useT()

    return (
        <button aria-label={t('Main Menu)}>
            <HamburgerIcon />
        </button>
    )
}
```

You can use the `t()` function literally anywhere inside your component. You could also use it in your template instead of the `<T>` component if you prefer, like so:

```tsx
<const MyComponent = () => {
    const t = useT()

    return (
        <p>{t('This will be translated')}</p>
    )
}
```

### t() function options

You can pass the same options to the `t()` functions as to the `<T>` component, eg. formality:

```tsx
<const MyComponent = () => {
    const t = useT()

    return (
        <button>{t('Please click here', { formality: 'formal' })}</button>
    )
}
```