Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    i18next React – links inside translations

    i18next React – links inside translations

    CHALLENGE: add dynamic translation to links in React

    SOLUTION: use the LinkText component and the Trans Component from the i18next library

    react-i18next is probably the most popular NPM package for translating a React application. It’s downloaded over 1 million times every week. I18next as internationalization-framework is really a complete solution for making a multi-language app: it can detect user language, cache translations, add post-processing (sprinf support) or load files on demand.

    Problem with i18next

    As awesome as it is, it does not provide an easy way for translating phrases with variables inside. Let’s say we have a Privacy Policy text with two url values inside the text. The naive approach will be to hardcode urls for pages in every available json translation file.

    The documentation doesn’t really provide a better solution. There is something like replacement tags, but the suggestion is to use the React Developer Tool to inspect an element and find out what node number is assigned to the word ( https://react.i18next.com/latest/trans-component#how-to-get-the-correct-translation-string ). In this article, we will describe how to do it better / easier.

    React-i18next use variables in translations

    We have a privacy policy text that is displayed in the registration form. It includes 2 external links. We would like to pass those as variables to the main translation. This way, we will maintain a separation between link constants and different translations of texts.

    I agree to the Privacy Policy and Terms and Conditions

    This solution provides a universal way to pass dynamic variables to internationalized strings. Your code will be cleaner and more readable.

    Trans and LinkText component

    Pure component LinkText uses props.children to put a text node label between opening and closing A Link tag. You can also pass other arguments, like: title or rel=”nofollow”.

    Here is the entire trick to have a translation that uses predefined variables passed to the Trans component:

    <Trans
        i18nKey="gdpr_policy_links"
        components={{
            link1: <LinkText to={link1} title="My link1" />,
            link2: <LinkText to={link2} title="Another link" />
        }}
    />

    and the definition of the LinkText component:

    export const LinkText = (props) => {
        return (
            <a href={props.to || '#'} target="_blank" title={props.title || ''}>
                {props.children}
            </a>
        );
    };
    Preview

    Using i18next in React

    Now, let’s start from the beginning and let’s prepare a fully working example. The first step is to install the following dependency:

    npm install react-i18next

    Import i18n config:

    // index.jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import './i18n/config';
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    reportWebVitals();

    Add a standard config file:

    // src/i18n/config.js
    import i18n from 'i18next';
    import { initReactI18next } from 'react-i18next';
    i18n.use(initReactI18next).init({
        fallbackLng: 'en',
        lng: 'en',
        resources: {
            en: {
                translations: require('./locales/en/translations.json')
            },
        },
        ns: ['translations'],
        defaultNS: 'translations'
    });
    i18n.languages = ['en'];
    export default i18n;

    Add a json file with the translation to: src/i18n/locales/en/translations.json

    {
      "gdpr_policy_links": "I agree to <link1>Privacy Policy</link1> and <link2>Terms and Conditions</link2>",
      "gdpr_required_msg": "Please accept Privacy Policy"
    }

    The Main app with the Register Form and predefined links:

    // src/App.jsx
    import React from 'react';
    import './App.css';
    import {RegisterForm} from "./RegisterForm";
    const LINK1 = 'https://www.example1.com';
    const LINK2 = 'https://www.example2.com';
    function App() {
        return (
            <div className="App">
                <RegisterForm link1={LINK1} link2={LINK2} />
            </div>
        );
    }
    export default App;

    Here is an example of how to display translations using i18next. For advanced translations with a link, we’re using the Trans component that is provided by react-i18next:

    // RegisterForm.jsx
    import React from 'react';
    import {Trans, useTranslation} from 'react-i18next'
    import {LinkText} from './LinkText';
    export const RegisterForm = (props) => {
        const {link1, link2} = props;
        const {t} = useTranslation();
        return (
           <>
                <h3>Standard translation</h3>
                {t('gdpr_required_msg')}
                <h3>Translation with variables</h3>
                <Trans
                    i18nKey="gdpr_policy_links"
                    components={{
                        link1: <LinkText to={link1} title="My link1" />,
                        link2: <LinkText to={link2} title="Another link" />
                    }}
                />
            </>
        );
    }
    

    The last piece of the puzzle will be the LinkText component to apply links in the translation text:

    // LinkText.jsx
    import React from 'react';
    export const LinkText = (props) => {
        return (
            <a href={props.to || '#'} target="_blank" title={props.title || ''}>
                {props.children}
            </a>
        );
    };
    Animated preview

    That’s it for today’s tutorial. Make sure to follow us for other tips and guidelines and don’t forget to sign up for our newsletter.

    Do you need someone to implement this solution for you? Check out our specialists for hire in the outsourcing section. Are you considering a global project and are uncertain how to proceed? See how we do it.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us