Best practices for translating components?

[zasuh]

What are the best practices for translating components? For instance I have a header component where I would like to translate 'Contact' and 'Biography' to a different language:

import React from 'react'
import { withTranslation, useTranslation } from 'react-i18next'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'

const Wrapper = styled.div`
  background: url("${props => props.theme.bgPattern}") #b6b6b6;
  display: flex;
  position: relative;
`

const Content = styled.div`
  margin: 0 auto;
  max-width: ${props => props.theme.maxWidths.general};
  padding: 3rem 1.0875rem 3rem 1.0875rem;
  color: ${props => props.theme.colors.secondary};
  text-align: center;
  height: 400px;
  @media (max-width: ${props => props.theme.breakpoints.s}) {
    height: 500px;
  }
`

const Name = styled.h1`
  margin: 1rem 0 0.25rem 0;
  color: ${props => props.theme.colors.color};
  font-size: 4rem;
`

const Contact = styled(Link)`
  margin-top: 3rem;
  padding: 0 1rem 0 0;

  a {
    margin: 0 0.3rem;
    color: black;
    text-decoration: underline;
  }
`

const Bio = styled(Link)`
  margin-top: 3rem;

  a {
    margin: 0 0.3rem;
    color: black;
    text-decoration: underline;
  }
`

const Header = ({ name }) => {
  return (
    <Wrapper>
      <Content>
        <Name>{name}</Name>
        <Contact to="/contact/">Contact</Contact>
        <Bio to="/about/">Biography</Bio>
      </Content>
    </Wrapper>
  )
}

export default Header

Header.propTypes = {
  name: PropTypes.string.isRequired,
}

[hugomn]

Hi @zasuh! I suggest using react-i18next for this kind of translation (https://react.i18next.com/). The scope of this plugin is to translate pages based on the filename. Please let me know if it works.

[zasuh]

@hugomn Hello! Thank you for the response! I ended up fixing my problem by using gatsby-plugin-intl, but am now back at looking into gatsby-plugin-l18n because I need to translate .mdx files. Does this plugin offer that?

[hugomn]

Hi @zasuh, I believe mdx files work in the same way. ;)

[zasuh]

@hugomn are you referring to gatsby-plugin-intl or gatsby-plugin-l18n? Do you maybe have an example?