React i18next in class component - createIT

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

    React i18next in class component

    React i18next in class component


    Challenge: translate strings in Class Components

    Solution: use withTranslation() i18next helper

    Since 2019, when React Hooks were introduced, the process of creating new applications has been very easy and developer-friendly. There are multiple benefits of having hooks, including better code readability and reusability. Also, it is easier to create and introduce unit and integration tests.

    I18next for React is a library for translating your application. It has all the needed features to prepare a multilanguage app: it is easy to use, it features active plugin maintenance on GitHub, extended documentation and is a part of the i18next ecosystem (translating network).

    hello john greetings gif

    Using hooks

    I18next for React was originally designed to use hooks and it’s doing it really well. More info about the project setup and the example of use can be found in the official plugin documentation: https://react.i18next.com/latest/usetranslation-hook

    Use of Next I18next in Class component

    What about class components, which are the old React standard? Can we still use next i18next in Class Components? The answer is yes. We can even have some components using hooks and other being Classes. All of them can still use this mechanism for translation.

    Let’s have a look at an example of adding i18next to the React Class component. Here is a step by step tutorial.

    Install dependencies

    We need the main library to be added to the project by the NPM package. After executing this command, proper items will be added to package.json:

    npm install react-i18next i18next –save

    Configure i18next

    Put configuration files in the src/i18n directory. The I18next React config.js file includes basic settings, and the localization strings are stored in translations.json

    // 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;
    

    An example translation file for the EN language is located in src/i18n/locales/en/translations.json

    {
      "welcome": "Hello",
      "nice-to-see": "Nice to see you!"
    }
    

    Adding import to Index

    To finish configuration, we need to import the config file directly in our index.jsx file:

    // src/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();
    

    Translation with React I18next in Class

    We have a simple Class Component that says Hello. The trick to enable i18next access to the component is to export it with withTranslation() . The displaying of translations is handled by using the .json key and this.props.t parameter. Here is an example: {this.props.t(‘nice-to-see’)}

    // src/Welcome.jsx
    // Component class - using i18next in React
    import React from 'react';
    import { withTranslation } from 'react-i18next';
    class Welcome extends React.Component {
        render() {
            return (
                <>
                    <h1>{this.props.t('welcome')} {this.props.name}!</h1>
                    <h4>{this.props.t('nice-to-see')}</h4>
                </>
            )
        }
    }
    export default withTranslation()(Welcome);
    

    To check if it’s working, let’s render the component in our application:

    // src/App.jsx
    import React from 'react';
    import './App.css';
    import Welcome from "./Welcome";
    function App() {
      return (
        <div className="App">
          <Welcome name={'John'} />
        </div>
      );
    }
    export default App;
    

    And application styles:

    .App {
      max-width:400px;
      margin:30px auto;
      padding:20px;
      text-align: center;
      background: #ffd73e33;
      border:10px solid black;
      border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
    }
    
    hello john in i18next react

    The demo’s border effect was inspired by: https://codepen.io/Mamboleoo/pen/zYOJOGb

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

    Comments
    0 response

    Add comment

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

    Popular news

    How to Get and Use the ChatGPT API
    • Dev Tips and Tricks

    How to Get and Use the ChatGPT API

    April 25, 2024 by createIT
    eCommerce growth – is your business ready?
    • Services
    • Trends

    eCommerce growth – is your business ready?

    April 8, 2024 by createIT
    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

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

    Contact us