Next.js & React-Currency-Format: Formatting Currency Made Easy

Written by

learnmodernjavascript

in

In the world of web development, dealing with currency can be a common and sometimes tricky task. Whether you’re building an e-commerce platform, a personal finance tracker, or any application that involves money, properly formatting currency is crucial. It ensures clarity, professionalism, and a positive user experience. This is where the react-currency-format npm package comes in handy. It’s a lightweight, flexible, and easy-to-use library that simplifies the process of formatting currency in your React and Next.js applications.

Why Currency Formatting Matters

Imagine browsing an online store and seeing prices displayed in a jumbled, inconsistent format. Would you trust that store? Probably not. Proper currency formatting is about more than just aesthetics; it’s about building trust and credibility with your users. It also prevents misunderstandings. For example, without proper formatting, it might be unclear whether a price is in US dollars, Euros, or another currency.

Here are a few key reasons why currency formatting is important:

  • User Experience: Clean, readable currency formats enhance the overall user experience.
  • Trust and Credibility: Professional formatting builds trust with users.
  • Clarity: Properly formatted currency avoids confusion and potential errors.
  • Internationalization: The ability to format currency according to different locales is essential for global applications.

In this tutorial, we’ll dive into how to use react-currency-format to effortlessly format currency in your Next.js projects. We’ll cover installation, basic usage, customization, and common scenarios you might encounter.

Getting Started: Installation

Before we start, you’ll need a Next.js project set up. If you don’t have one, you can quickly create one using the following command in your terminal:

npx create-next-app my-currency-app
cd my-currency-app

Once your Next.js project is ready, you can install the react-currency-format package using npm or yarn. Open your terminal in the project directory and run:

npm install react-currency-format
# or
yarn add react-currency-format

With the package installed, you’re ready to start formatting currency!

Basic Usage: Formatting Currency

Let’s start with a simple example. Suppose you have a price value of 1234.56 and you want to display it as currency. Here’s how you can do it using react-currency-format:

Create a new file called CurrencyDisplay.js in your components directory (or any directory you prefer). Add the following code:

import CurrencyFormat from 'react-currency-format';

function CurrencyDisplay() {
 const price = 1234.56;

 return (
 <div>
 <CurrencyFormat value={price} displayType={"text"} thousandSeparator= {','} prefix={"$"} decimalScale={2} />
 </div>
 );
}

export default CurrencyDisplay;

Now, import this component into your pages/index.js file (or your main page component) and render it:

import CurrencyDisplay from '../components/CurrencyDisplay';

function HomePage() {
 return (
 <div>
 <h1>My Currency App</h1>
 <CurrencyDisplay />
 </div>
 );
}

export default HomePage;

In this example, we import CurrencyFormat from the react-currency-format package. We then define a price variable. The CurrencyFormat component takes several props:

  • value: The numeric value you want to format.
  • displayType: Specifies how to display the formatted value. We use “text” to render it directly. Other options include “input” (for use in input fields) and “string” (to get a formatted string).
  • thousandSeparator: The character to use for separating thousands (e.g., “,”).
  • prefix: The currency symbol to display before the value (e.g., “$”).
  • decimalScale: The number of decimal places to display.

When you run your Next.js application (npm run dev or yarn dev), you should see the price formatted as $1,234.56.

Customizing Currency Formatting

react-currency-format offers a wide range of customization options to tailor the formatting to your specific needs. Let’s explore some common customizations:

Changing the Currency Symbol

To display a different currency symbol, simply change the prefix prop. For example, to display the Euro symbol:

<CurrencyFormat value={price} displayType={"text"} thousandSeparator= {','} prefix={"€"} decimalScale={2} />

This will display the price as €1,234.56.

Changing the Decimal Separator

You can change the decimal separator using the decimalSeparator prop. By default, it’s a period (.). If you want to use a comma, you can do:

<CurrencyFormat value={price} displayType={"text"} thousandSeparator= {','} prefix={"$"} decimalSeparator={","} decimalScale={2} />

This will display the price as $1,234,56.

Using Different Display Types

The displayType prop controls how the formatted value is rendered. We’ve already seen “text”. Here are other useful options:

  • "text": Renders the formatted value as plain text (used in the previous examples).
  • "input": Renders the formatted value inside an <input> element. This is useful for creating currency input fields.
  • "string": Returns the formatted value as a string. This is useful if you need to manipulate the formatted value programmatically.

Here’s an example of using the “input” display type:

<CurrencyFormat value={price} displayType={"input"} thousandSeparator= {','} prefix={"$"} decimalScale={2} />

This will render an input field with the formatted currency value. Users can then edit the value in the input, and the formatting will adjust accordingly. Note that when using the input type, you’ll need to handle the onChange event to update the value.

Handling User Input in Input Fields

When using displayType="input", you’ll need to manage the user’s input and update the state accordingly. Here’s a basic example:

import { useState } from 'react';
import CurrencyFormat from 'react-currency-format';

function CurrencyInput() {
 const [amount, setAmount] = useState(1234.56);

 const handleInputChange = (values) => {
 const { value } = values;
 setAmount(value);
 };

 return (
 <div>
 <CurrencyFormat
 value={amount}
 displayType={"input"}
 thousandSeparator= {','}
 prefix={"$"}
 decimalScale={2}
 onValueChange={handleInputChange}
 />
 <p>Formatted Amount: {amount}</p>
 </div>
 );
}

export default CurrencyInput;

In this example:

  • We use the useState hook to manage the amount.
  • We define a function handleInputChange to update the state when the input value changes.
  • The onValueChange prop of CurrencyFormat takes the handleInputChange function as its value.
  • Inside handleInputChange, we get the updated value from the values object, which is provided by the CurrencyFormat component.

This setup allows users to type in the input field, and the amount state will be updated accordingly. The formatted amount (as plain text) is also displayed below the input field, demonstrating how to use the formatted value.

Internationalization and Locales

For applications that support multiple locales, react-currency-format provides excellent support for internationalization. You can use the locale prop to specify the locale for formatting. This will automatically adjust the currency symbol, decimal separator, and thousand separator based on the selected locale.

Here’s how to use the locale prop:

import CurrencyFormat from 'react-currency-format';

function CurrencyDisplay({ locale, currency }) {
 const price = 1234.56;

 return (
 <div>
 <CurrencyFormat
 value={price}
 displayType={"text"}
 thousandSeparator= {','}
 decimalScale={2}
 prefix={currency}
 decimalSeparator={locale === 'de-DE' ? ',' : '.'}
 locale={locale}
 />
 </div>
 );
}

export default CurrencyDisplay;

In this example, we pass a locale prop to the component. We also pass a currency symbol. The decimal separator is conditionally set based on the locale. For German (de-DE), we use a comma as the decimal separator. For other locales, we use a period.

To use this component, you would pass the desired locale as a prop:

<CurrencyDisplay locale="en-US" currency="$" />  <!-- Displays $1,234.56 -->
<CurrencyDisplay locale="de-DE" currency="€" />  <!-- Displays 1.234,56 € -->

You can dynamically determine the locale based on the user’s browser settings or a user-selected language preference.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when using react-currency-format and how to avoid them:

1. Forgetting to Install the Package

This is a basic but common mistake. Make sure you’ve installed the package using npm install react-currency-format or yarn add react-currency-format before you try to import and use it.

2. Incorrect Prop Usage

Double-check that you’re using the correct props and that they’re spelled correctly. For example, ensure you are using thousandSeparator and not thousandSeperator. Also, make sure that the data types of the props are correct (e.g., value should be a number).

3. Not Handling User Input Correctly

When using displayType="input", remember to handle the onChange or onValueChange event to update the state with the user’s input. Failing to do so will result in the input field not reflecting the changes the user makes.

4. Misunderstanding the Locale Prop

The locale prop is crucial for internationalization. Make sure you are passing the correct locale codes (e.g., “en-US”, “de-DE”, “fr-FR”). Also, ensure that your application has a mechanism for determining the user’s preferred locale.

5. Not Considering Edge Cases

Think about edge cases, such as very large or very small numbers, or currencies with different formatting rules. Test your currency formatting across different scenarios to ensure it behaves as expected.

Step-by-Step Instructions: Building a Simple Price Display

Let’s walk through a complete example of building a simple price display component:

  1. Create a new Next.js project (if you don’t already have one) using npx create-next-app my-currency-app.
  2. Install react-currency-format: Navigate to your project directory and run npm install react-currency-format or yarn add react-currency-format.
  3. Create a Currency Component: Create a new file called PriceDisplay.js in your components directory. Add the following code:
import CurrencyFormat from 'react-currency-format';

function PriceDisplay({ price, locale, currencySymbol }) {
 return (
 <div>
 <CurrencyFormat
 value={price}
 displayType={"text"}
 thousandSeparator= {','}
 decimalScale={2}
 prefix={currencySymbol}
 decimalSeparator={locale === 'de-DE' ? ',' : '.'}
 locale={locale}
 />
 </div>
 );
}

export default PriceDisplay;
  1. Use the Component in Your Page: Open your pages/index.js file and import the PriceDisplay component. Render it with some sample data:
import PriceDisplay from '../components/PriceDisplay';

function HomePage() {
 const price = 1234.56;

 return (
 <div>
 <h1>My Price Display</h1>
 <PriceDisplay price={price} locale="en-US" currencySymbol="$" />
 <PriceDisplay price={price} locale="de-DE" currencySymbol="€" />
 </div>
 );
}

export default HomePage;
  1. Run Your Application: Run your Next.js application using npm run dev or yarn dev. You should see two price displays, one formatted for US dollars and one for Euros.

This example demonstrates how to create a reusable currency formatting component that can be easily customized and adapted to different locales and currencies.

Key Takeaways

  • react-currency-format is a powerful and flexible library for formatting currency in React and Next.js applications.
  • Proper currency formatting improves user experience and builds trust.
  • You can customize the currency symbol, decimal separator, and thousand separator.
  • The locale prop is essential for internationalization.
  • Always handle user input correctly when using input fields.

FAQ

1. How do I handle negative currency values?

react-currency-format automatically handles negative values. The negative sign will be displayed before the currency symbol (e.g., -$1,234.56).

2. Can I use react-currency-format with other input validation libraries?

Yes, you can. You can integrate react-currency-format with libraries like Formik or React Hook Form to perform more complex validation and form management.

3. How do I format currency in an input field and prevent the user from entering invalid characters?

When using the displayType="input", you can combine react-currency-format with a library like react-number-format to restrict the user to enter only valid numeric characters, and handle the formatting consistently. You would also need to implement validation logic to handle edge cases and ensure data integrity.

4. Does react-currency-format support different currency symbols for different locales?

Yes, the locale prop will automatically handle the currency symbol based on the selected locale. The library uses the locale settings to determine the appropriate symbol.

5. How can I format currency dynamically based on user selection?

You can use state to store the user’s selected currency and locale. Then, pass these values as props to the CurrencyFormat component. This allows you to dynamically change the currency formatting based on the user’s choices.

Using react-currency-format is a straightforward way to enhance the presentation of monetary values within your Next.js applications. By understanding its capabilities, you can provide a more polished and user-friendly experience, regardless of whether you are building a simple portfolio site or a complex e-commerce platform. From the basic implementation to more advanced customization, this library equips you with the tools necessary to handle currency formatting with confidence. The flexibility to adapt to different locales ensures that your application is accessible and intuitive for users around the globe. Always remember to consider the user’s perspective, paying attention to detail, and creating a seamless experience. As you continue to build and refine your applications, integrating this package will not only elevate the aesthetic appeal but also contribute to the overall reliability and professionalism of your projects.

More posts