The useT hook

Translate any string in your component with 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:

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:

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

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

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