I18n

[marchintosh94]

Description I'd like to implement the i18n feature by using this library of which I'm the creator:

• npm: i18nPro-React
• Github: i18nPro-React

By using this library you'll have the flexibility to choose where store localized values (locally in the code, cdn, REST endpoint)

[suryanshsingh2001]

Hi @marchintosh94 ,

Thanks for reaching out with the request to implement i18n using your library, i18nPro-React. I’ve assigned the issue and would love to get started, but I have a few quick questions to clarify before proceeding:

• [ ] Could you provide more details on how you'd like the localization data to be stored? Do you have a preference for local storage, CDN, or a REST endpoint in this specific project?
• [ ] Are there any existing translations or examples you'd like me to refer to during implementation?
• [ ] Would you like any specific languages or regions prioritized during the setup?

Looking forward to your input!

[marchintosh94]

Hi @suryanshsingh2001,

first of all, I forgot to say that i18nPro-react is an implementation for React projects and it is build on top of i18nPro, that is the core library. Anyway, to be more clear about the feature that I'd like to implement, I'm gonna give an example of code implementation, so you can better understand the flow.

1. Configure the default locale

import { i18nPro } from '@marchintosh94/i18n-pro'

// it can be also set with default value or for example based on browser language settings
i18nPro.defaultLocale = 'en-US'

//... other

2. Load localizations Here you can fin all the ways to load translations i18nPro Usage Here you can see the accepted format for translations: i18nPro Json

3. Implement i18n in components

const Footer = () => {
  /** even if it is a cutom hook it manage globally the active language */
  const { t } = useI18nPro()

  return (
    <footer className="bg-[#523f1b] text-white py-6 mt-auto">
      <div className="container mx-auto flex flex-col items-center justify-center text-center">
        <div className="text-3xl font-semibold mb-2">
          {
            /** this output related translation for this token => Explore More Amazing Books! */ 
            /** if label is missing outputs the token (in this case: explore_more) */ 
            t('explore_more') 
          }

        </div>
        <div className="text-lg text-gray-400 mb-4">
          {
            /** this output related translation for this token */ 
            /** if label is missing outputs the token (in this case: Because reading is the ultimate adventure) */ 
            t('Because reading is the ultimate adventure')
          }
        </div>
        {/**  other code **/}
      </div>
    </footer>
   )
}

Well, talking about the implementation, I think we can put all translation file (one JSON file for each language) in the public folder to not add complexity to the project (in the future those files may be moved to a CDN for example). Here all the implementation I'd like to do in details:

• create first file for traslation for en-us
• set the default language based on browser settings (with fallback to en-us if it is not available)
• replace all hard coded text with the method to translate
• create a menu in the Footer to change language

Once these steps are done you can proceed to implement other translation files. Looking forward to your feedback to start.

[suryanshsingh2001]

@marchintosh94, got it! You're looking to implement internationalization. We can definitely add multilingual support to accommodate that. You can proceed with this, sounds good.

[suryanshsingh2001]

Gentle Reminder ⏰

Hi! When you're assigned an issue, please note that if there's no activity for over 7 days, we may need to unassign it to ensure project progress. This helps keep things moving smoothly.

Thank you for your understanding! 🙏

[marchintosh94]

Hi @suryanshsingh2001, I had a busy week, but I've almost done the implementation. I just need other few days to submit the pull request

[suryanshsingh2001]

Hi @suryanshsingh2001, I had a busy week, but I've almost done the implementation. I just need other few days to submit the pull request

Hey @marchintosh94 , Feel free to take your time. I was just checking for inactive assignees.