@rn-common/locale
v0.1.1
Published
This module provides a simple and flexible way to manage localization (i18n) in a React/React Native application using Redux Toolkit. It allows for dynamic language switching and provides a hook to access localized strings based on the current language.
Downloads
2
Readme
@rn-common/locale
This module provides a simple and flexible way to manage localization (i18n) in a React/React Native application using Redux Toolkit. It allows for dynamic language switching and provides a hook to access localized strings based on the current language.
Installation
Install using npm:
npm install @rn-common/locale
or yarn:
yarn add @rn-common/locale
Features
- Language Management: Easily set and switch between languages.
- Localization Support: Define localized strings for multiple languages.
- Redux Integration: Uses Redux Toolkit's
createSlice
for state management. - React Hook: Provides a custom hook for accessing localized strings in components.
Usage
1. Define Your Localized Strings
Create a map of localized strings for each supported language.
const languageMap = {
en: {
greeting: 'Hello',
farewell: 'Goodbye',
},
es: {
greeting: 'Hola',
farewell: 'Adiós',
},
}
2. Create the Locale Reducer
Use the createLocaleReducer
function to create a slice and associated actions.
import { createLocaleReducer } from '@rn-common/locale'
const config = {
languageMap,
initialLanguage: 'en',
}
const { slice, setLanguage, useStrings } = createLocaleReducer(config)
3. Integrate with Redux Store
Add the created slice to your Redux store.
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {
[slice.name]: slice.reducer,
},
})
4. Access Localized Strings in Components
Use the useStrings
hook to access localized strings in your React components.
import React from 'react'
import { useStrings, setLanguage } from './localeSlice'
import { useDispatch } from 'react-redux'
const MyComponent = () => {
const strings = useStrings()
const dispatch = useDispatch()
return (
<div>
<p>{strings.greeting}</p>
<button onClick={() => dispatch(setLanguage('es'))}>
Switch to Spanish
</button>
</div>
)
}