Crema React
v-2
v-2
  • About Crema(CRA)
  • Product Overview
  • Folder Structure
  • Installation
    • Pre-Requisites
    • Installing Crema
  • Default Route
  • Customization
    • Template Style
    • Template Mode
    • Template and Sidebar Color
    • Tempate Direction
    • Navigation Style
    • Footer
    • Footer Type
    • Route Transition
  • Multi-Lingual Support
    • Changing Language
    • Adding New Language
  • Sidebar Menu
    • Adding New Menu
  • Route Protection
  • Loggedin User
  • Axios Setup
  • Package.json
  • GitHub Access
  • Slack Community
  • FAQ
  • Next.js
    • About Next.JS
    • Installation
    • Folder Structure
    • Route Protection
    • Deploy to server
  • Servers
    • Python
    • Mongoose
    • Laravel
Powered by GitBook
On this page

Was this helpful?

  1. Multi-Lingual Support

Adding New Language

Last updated 5 years ago

Was this helpful?

In order to add new language to the template, follow the following steps:-

1. Make a new .json file in the folder with the path :-

src/shared/localization/locales

2. Copy the content of the file 'en-US.json' kept adjacent to the file you made and paste it into your file. The path of file 'en-US.json' is:-

src/shared/localization/locales/en_US.json

3. In the next step, you need to translate the values of translation variables into the new language.

4. Now make a new file in the folder with the path:-

src/shared/localization/entries

The name of the file should be same as the above-created file, just the extension will be different, this will be a .js file, earlier we created a .json file.

Copy the following code, paste it into the newly made file and modify the content according to the changes suggested in the image given below the code.

import saMessages from '../locales/es_ES.json';
import {esES} from '@material-ui/core/locale';

const saLang = {
	messages: {
		...saMessages,
	},
	muiLocale: esES,
	locale: 'es',
};
export default saLang;

5. Now go to the file with the following path:-

src/@crema/core/LanguageSwitcher/data.js

and add the new object corresponding to the new language, code should look something like this:-

6. In the last step, open the file on the path:-

src/shared/localization/index.js

and add the language code defined in the above step and assign the value of the variable exported in step 4 to this code. Follow the following code for reference:-