@razorpay/i18nify-react
v4.0.12
Published
Welcome to i18nify-react, your new best friend for seamlessly managing i18n state in React applications! π The i18nify-react Context Provider is a simple and flexible solution for managing internationalization (i18n) state in React applications. This pro
Downloads
292
Keywords
Readme
i18nify-react
Welcome to i18nify-react, your new best friend for seamlessly managing i18n state in React applications! π The i18nify-react Context Provider is a simple and flexible solution for managing internationalization (i18n) state in React applications. This provider utilizes the @razorpay/i18nify-js library to handle i18n state and exposes a React Context for efficient state management across the application.
Features
- I18nProvider: A custom React Context provider that effortlessly spreads i18n state updates across your component tree.
- useI18nContext Hook: Fetch values exposed by the
I18nProvider
using this handy custom React hook. - Easy Integration: Integrate i18n state management into your React app with style and ease.
- Consistent State: Ensure a single instance of
I18nProvider
at the topmost parent component for consistent i18n state handling.
Installation
Install the
@razorpay/i18nify-js
package:npm install @razorpay/i18nify-js
Install the
@razorpay/i18nify-react
package:npm install @razorpay/i18nify-react
Import the
I18nProvider
anduseI18nContext
components into your project:import { I18nProvider, useI18nContext } from '@razorpay/i18nify-react';
Usage
I18nProvider
Add the I18nProvider
to the topmost parent component in your application to kickstart the i18n magic!πͺ
Example:
import React from 'react';
import { I18nProvider } from '@razorpay/i18nify-react';
const App = ({ data }) => {
return (
<I18nProvider initData={data}>
<div>
<h1>Server-Side Rendering</h1>
{/* Your components go here */}
</div>
</I18nProvider>
);
};
export default App;
useI18nContext Hook
Leverage the useI18nContext
hook to fetch values exposed by the I18nProvider
deep down in your component tree. π³
Example:
import React from 'react';
import { useI18nContext } from '@razorpay/i18nify-react';
const MyComponent = () => {
const { i18nState, setI18nState } = useI18nContext();
// Access and update i18n state as needed
return <div>{/* Your component content */}</div>;
};
export default MyComponent;
API Reference
I18nProvider Props
- children (required): The components wrapped by the
I18nProvider
. - initData (optional): Initial data to merge with the i18n state during initialization.
useI18nContext Hook
- Returns: An object with properties
i18nState
andsetI18nState
for accessing and updating the i18n state.
Happy coding! ππ