@mertsolak/translator
v3.0.1
Published
Lightweight translator to switch between multiple language files with **auto complete** and **input validation** for React.
Downloads
4
Readme
Translator
Lightweight translator to switch between multiple language files with auto complete and input validation for React.
Installation
Use node package manager to install @mertsolak/translator
npm i @mertsolak/translator
Basic Usage
Create a language file
// languageFiles.ts
export const languageFiles = {
language1: {
homePage: {
title: 'title',
}
}
language2: {
homePage: {
title: 'title'
}
}
};
Create a config file
// config.ts
export const options = {
validateLanguageFiles: true,
};
Export type of the language file
// types.ts
import { languageFiles } from './languageFiles';
export type LanguageFiles = typeof languageFiles;
Initialize it in the root component
// Root.tsx
import { useState } from 'react';
import { TranslatorProvider } from '@mertsolak/translator';
import { languageFiles } from './languageFiles';
import { options } from './config';
const Root = () => {
const [currentLanguage, setCurrentLanguage] = useState('language1'); // Also redux can be used
return (
<TranslatorProvider languageFiles={languageFiles} languagePreference={currentLanguage} options={options}>
<App />
</TranslatorProvider>
);
};
export default Root;
Use it everywhere
// AnyComponent.tsx
import { useTranslator } from '@mertsolak/translator';
import { LanguageFiles } from './types'; // Type is needed for auto completion
const HomePage = () => {
const translator = useTranslator<LanguageFiles>('homePage');
return (
<div>
<p>{translator.title}</p>
</div>
);
};
export default HomePage;
Additional
languageFiles and languagePreference can be updated in everywhere.
// HomePage.tsx
import { useEffect, useState, useContext } from 'react';
import { TranslatorContext } from '@mertsolak/translator';
import { newLanguageFiles } from './newLanguageFiles';
const HomePage = () => {
const [newLanguagePreference, setNewLanguagePreference] = useState('language1');
const { setLanguageFiles, setLanguagePreference } = useContext(TranslatorContext);
useEffect(() => {
setLanguageFiles(newLanguageFiles);
setLanguagePreference(newLanguagePreference);
}, []);
return <p>Home Page</p>;
};
export default HomePage;