hook-based-react-i18n-tool
v1.0.2
Published
A simple hook-based i18n tool for React applications, facilitating easy translations.
Downloads
7
Readme
hook-based-react-i18n-tool
A React library providing a hook-based approach to internationalization (i18n).
Installation
You can install this library via npm:
npm install hook-based-react-i18n-tool
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import I18nProvider, { useTranslation } from 'hook-based-react-i18n-tool';
// Define translation resources
const resources = {
en: {
greeting: 'Hello, World!',
},
fr: {
greeting: 'Bonjour le monde!',
},
};
const App = () => {
const { t, changeLanguage } = useTranslation();
return (
<div>
<h1>{t('greeting')}</h1>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('fr')}>French</button>
</div>
);
};
ReactDOM.render(
<I18nProvider resources={resources} defaultLanguage="en">
<App />
</I18nProvider>,
document.getElementById('root')
);
API
I18nProvider
Provider component for managing the i18n state and providing translation context to the app.
Props:
children
: Child components to be wrapped by the provider.resources
: Object containing translation resources.defaultLanguage
: Default language for the app. Defaults to'en'
.
useTranslation
Custom hook for accessing translation functions.
Returns:
t
: Translation function.changeLanguage
: Function to change the current language.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.