diff --git a/.changeset/purple-flies-end.md b/.changeset/purple-flies-end.md index 76649b7dd03..48badce559f 100644 --- a/.changeset/purple-flies-end.md +++ b/.changeset/purple-flies-end.md @@ -14,7 +14,7 @@ References** 2. If you want to enable users to change the locale of your page, add the `@razorpay/i18nify-react` package and wrap your app inside the `I18nProvider`. Utilize the `setI18nState` utility to modify the locale. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react). -3. Additionally, if you prefer to maintain a fixed locale for your page and amount component, enclose your app within `..`. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react). +3. Additionally, if you prefer to maintain a fixed locale for your page and amount component, enclose your app within `..`. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react). **How to update ?** diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index 8421b100506..8177cc798b1 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -96,6 +96,47 @@ Only use this if you're unable to run the codemod described above. ### Amount +- **Amount component is now internationalized via [@razorpay/i18nify-js](https://www.npmjs.com/package/@razorpay/i18nify-js).** + +1. The `` component will now automatically format numbers based on the user's browser locale. For example, `` will render `₹1,23,456.79` for browsers with the `en-IN` default locale, whereas it will render `₹123,456.79` for browsers with the `en-US` locale. + +2. If you want to enable users to change the locale of your page, add the `@razorpay/i18nify-react` package and wrap your app inside the `I18nProvider`. Utilize the `setI18nState` utility to modify the locale. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react). + +3. Additionally, if you prefer to maintain a fixed locale for your page and amount component, enclose your app within `..`. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react). + +Example with `@razorpay/i18nify-react` + +``` +import React, { useEffect } from "react"; +import { I18nProvider, useI18nContext } from "@razorpay/i18nify-react"; +import { BladeProvider, Amount } from '@razorpay/blade/components'; + +const ToggleAmount = ({ value }) => { + const { setI18nState } = useI18nContext(); + + function onLocaleChange() { + setI18nState({ locale: "de-DE" }); + } + + return ( + <> + + + + ); +}; + +const App = () => { + return ( + + + + + + ); +}; +``` + - **The accepted values for the `size` prop has been updated.** ```diff