Convert English Digits to Persian in Next.js – ToPersianNumber

ToPersianNumber is a lightweight JavaScript library specifically designed for converting English numbers to Persian (Farsi) numbers in Next.js and React.js applications.

This utility function handles both numeric values and strings containing numbers, transforming them into Persian number format with minimal configuration.

Features

Use Cases

• E-commerce Localization: Imagine you run an online store. You want to expand your reach to Iran. ToPersianNumber lets you display prices in Persian numerals, creating a localized user experience.
• Internationalized Dashboards: If you are building a data dashboard for a global audience, presenting numeric data in the user’s preferred format improves comprehension. Use ToPersianNumber to render statistics and figures in Persian numerals for Farsi-speaking users.
• Content Management Systems: If your CMS supports multiple languages, ToPersianNumber is useful for displaying dates, counters, or any numerical content in Persian. For example, you might have a blog post view counter that needs to display correctly in both English and Persian versions of your site.
• Educational Applications: Develop an interactive learning platform. ToPersianNumber allows you to format numbers within educational materials correctly for Persian-speaking students.

Installation

1. Open your terminal and navigate to your project directory.

2. Install the package using npm by running:

npm install topersiannumber

3. Alternatively, install with Yarn by running:

yarn add topersiannumber

4. Verify the installation in your package.json file.

Usage

1. Import the function into your component:

import { ToPersianNumber } from 'topersiannumber';

2. Then call the function with either a number or string argument:

// Converting a numeric value
const price = 1250000;
const persianPrice = ToPersianNumber(price);
// Result: ۱۲۵۰۰۰۰
// Converting a string containing numbers
const orderNumber = "ORD-12345";
const persianOrderNumber = ToPersianNumber(orderNumber);
// Result: ORD-۱۲۳۴۵

The function automatically detects the input type and applies the appropriate conversion method.

3. Implementation in a Next.js Component

import React from 'react';
import { ToPersianNumber } from 'topersiannumber';
const PriceDisplay = ({ amount, currency }) => {
  return (
    <div className="price-tag">
      {ToPersianNumber(amount)} {currency}
    </div>
  );
};
export default PriceDisplay;

Related Resources

• Next.js Documentation – Official guide for building applications with Next.js.
• React Documentation – Comprehensive resource for building user interfaces with React.
• react-intl – Library to format dates, numbers, and strings in your React application.
• next-i18next – Tool for integrating internationalization in Next.js projects.

FAQs

Q: Does this library handle very large numbers?
A: Yes, ToPersianNumber uses Intl.NumberFormat internally, which is designed to handle a wide range of number sizes correctly.

Q: Can I use this with server-side rendering in Next.js?
A: Yes, ToPersianNumber is compatible with both client-side and server-side rendering in Next.js.

Q: Does it work in plain JavaScript projects (without React or Next.js)?
A: Yes, you can use the function in any JavaScript environment. The React/Next.js focus is on where it’s commonly used.

Q: What if I pass something that isn’t a number or a string?
A: The provided code returns the input unchanged if it is not a number or a string.

Q: Does ToPersianNumber work with negative numbers?
A: Yes, ToPersianNumber correctly handles negative numbers, maintaining the negative sign while converting the digits to Persian format.

Q: Can I use ToPersianNumber with currency values that include decimal points?
A: Yes, the library properly converts decimal numbers, preserving the decimal point while transforming all digits to Persian numerals.