Next.js & React-Currency-Input-Field: A Beginner’s Guide

Written by

learnmodernjavascript

in

In the world of web development, creating user-friendly forms is crucial for a smooth user experience. One common requirement is handling currency input, where users need to enter monetary values. While basic HTML input fields can handle numbers, they often lack the formatting and validation needed for currency. This is where the react-currency-input-field npm package comes to the rescue. This tutorial will guide you through integrating this powerful package into your Next.js projects, making currency input a breeze.

Why Use react-currency-input-field?

Imagine building an e-commerce website where users enter the price of a product or a donation form where they specify the amount. Without proper formatting, the user experience can be clunky and error-prone. react-currency-input-field provides several key benefits:

  • Automatic Formatting: It automatically formats the input as the user types, adding currency symbols, thousands separators, and decimal places.
  • Validation: It helps validate the input to ensure it’s a valid currency value, preventing incorrect data entry.
  • Customization: It offers extensive customization options to tailor the input field to your specific currency and formatting preferences.
  • Accessibility: It’s designed to be accessible, ensuring a positive experience for all users.

Using this package saves you from writing complex regular expressions or custom formatting functions, allowing you to focus on the core functionality of your application.

Setting Up Your Next.js Project

If you don’t have a Next.js project set up yet, create one using the following command:

npx create-next-app my-currency-app

Navigate into your project directory:

cd my-currency-app

Installing react-currency-input-field

Install the package using npm or yarn:

npm install react-currency-input-field

or

yarn add react-currency-input-field

Implementing the Currency Input Field

Let’s create a simple component to demonstrate the usage. Open your pages/index.js file (or any page you prefer) and replace the existing content with the following:

import { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function HomePage() {
  const [value, setValue] = useState('');

  const handleChange = (newValue, name, values) => {
    setValue(newValue);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Currency Input Example</h2>
      <p>Enter an amount:</p>
      <CurrencyInput
        id="currency-input"
        name="input-name"
        placeholder="$0.00"
        value={value}
        onValueChange={handleChange}
        prefix="$"
        decimalSeparator="."
        groupSeparator=","
      />
      <p>Entered Value: {value}</p>
    </div>
  );
}

export default HomePage;

Let’s break down this code:

  • Import Statements: We import useState from React and CurrencyInput from react-currency-input-field.
  • State Management: We use the useState hook to manage the input value.
  • CurrencyInput Component: We render the CurrencyInput component, passing several props:
    • id: A unique identifier for the input field.
    • name: The name attribute for the input field (useful for form submissions).
    • placeholder: The placeholder text displayed in the input field.
    • value: The current value of the input field, controlled by our state.
    • onValueChange: A function that is called when the input value changes. It receives the new value as an argument.
    • prefix: The currency symbol to display before the value (e.g., ‘$’).
    • decimalSeparator: The character used for the decimal separator (e.g., ‘.’).
    • groupSeparator: The character used for the thousands separator (e.g., ‘,’).
  • Displaying the Value: We display the current value below the input field to demonstrate how to access the formatted value.

Run your Next.js development server:

npm run dev

or

yarn dev

Open your browser and navigate to http://localhost:3000. You should see the currency input field. As you type, the input will be automatically formatted with the dollar sign, thousands separators, and decimal places.

Customization Options

react-currency-input-field offers a wide range of customization options to fit various currency formats and user preferences. Here are some of the most useful props:

  • prefix: Sets the currency symbol (e.g., ‘$’, ‘€’, ‘£’).
  • suffix: Sets a suffix after the value (e.g., ‘ USD’).
  • decimalSeparator: Specifies the decimal separator (e.g., ‘.’, ‘,’).
  • groupSeparator: Specifies the thousands separator (e.g., ‘,’, ‘.’).
  • allowNegativeValue: Allows or disallows negative values (true or false).
  • intlConfig: Allows you to use the Intl API for more advanced formatting based on locales.
  • disableGroupSeparator: Disables the group separator.
  • maxLength: Sets the maximum length of the input.
  • onFocus and onBlur: Event handlers for focus and blur events.
  • className and style: Standard HTML attributes for styling.

Let’s modify our example to use Euros (€) and a different decimal separator:


import { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function HomePage() {
  const [value, setValue] = useState('');

  const handleChange = (newValue, name, values) => {
    setValue(newValue);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Currency Input Example (Euros)</h2>
      <p>Enter an amount:</p>
      <CurrencyInput
        id="currency-input-euro"
        name="input-name-euro"
        placeholder="€0,00"
        value={value}
        onValueChange={handleChange}
        prefix="€"
        decimalSeparator=","
        groupSeparator="."
      />
      <p>Entered Value: {value}</p>
    </div>
  );
}

export default HomePage;

In this updated example, we changed the prefix to “€”, the decimalSeparator to “,”, and the groupSeparator to “.”. Refresh your browser to see the changes.

Handling Form Submissions

When working with forms, you’ll need to capture the currency input value and submit it. Here’s how you can integrate react-currency-input-field into a form:


import { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function HomePage() {
  const [value, setValue] = useState('');
  const [submittedValue, setSubmittedValue] = useState('');

  const handleChange = (newValue, name, values) => {
    setValue(newValue);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setSubmittedValue(value);
    // You can now send the 'value' to your server.
    console.log('Submitted value:', value);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Currency Input Form</h2>
      <form onSubmit={handleSubmit}>
        <p>Enter an amount:</p>
        <CurrencyInput
          id="currency-input-form"
          name="amount"
          placeholder="$0.00"
          value={value}
          onValueChange={handleChange}
          prefix="$"
          decimalSeparator="."
          groupSeparator=","
        />
        <button type="submit">Submit</button>
      </form>
      <p>Submitted Value: {submittedValue}</p>
    </div>
  );
}

export default HomePage;

Here’s what changed:

  • Form Element: We wrapped the input field in a <form> element.
  • `onSubmit` Handler: We added an onSubmit handler to the form. This function prevents the default form submission behavior and logs the currency value to the console. In a real application, you would send this value to your backend.
  • `submittedValue` State: We added a state variable, submittedValue, to display the submitted value.
  • Button: Added a submit button.

When you submit the form, the formatted currency value will be logged to the console, and the submitted value will appear on the page.

Common Mistakes and Troubleshooting

Here are some common issues and how to resolve them:

  • Incorrect Formatting: Double-check your prefix, decimalSeparator, and groupSeparator props to ensure they match your desired currency format.
  • Value Not Updating: Make sure you’re correctly managing the value prop with your component’s state and updating it in the onValueChange handler.
  • Data Type Issues: The onValueChange handler provides the new value as a string. If you need to perform calculations, remember to convert the value to a number using parseFloat() or Number().
  • Ignoring `name` prop: While the package handles formatting, it’s essential to include the `name` prop if you plan to submit the form data to a server.
  • Conflict with CSS: Sometimes, your existing CSS styles might interfere with the appearance of the input field. Use your browser’s developer tools to inspect the element and identify any conflicting styles. You might need to adjust your CSS to override them or use a more specific selector.

Accessibility Considerations

Making your web applications accessible is crucial for inclusivity. When using react-currency-input-field, keep the following in mind:

  • Labels: Always associate the input field with a descriptive <label> element. This helps screen readers identify the purpose of the input.
  • ARIA Attributes: Consider using ARIA attributes (e.g., aria-label, aria-describedby) to provide additional context for screen reader users.
  • Contrast: Ensure sufficient color contrast between the text and the background for readability.
  • Keyboard Navigation: Test your form with keyboard navigation to ensure users can easily navigate between fields.

By following these guidelines, you can create a currency input field that is both user-friendly and accessible to everyone.

Key Takeaways

  • react-currency-input-field simplifies currency input in Next.js applications.
  • It provides automatic formatting, validation, and customization options.
  • Proper state management is key to updating the input value.
  • Remember to handle form submissions and convert the input value to a number if necessary.
  • Always consider accessibility best practices.

FAQ

Q: How do I handle different currencies?

A: Use the prefix prop to set the currency symbol (e.g., “$”, “€”, “£”) and adjust the decimalSeparator and groupSeparator props accordingly.

Q: How can I validate the input to ensure it’s not empty?

A: You can add validation logic within your onValueChange handler or use a form validation library like Formik or React Hook Form to handle form validation.

Q: Can I use this with other form libraries?

A: Yes, you can integrate react-currency-input-field with form libraries. You will need to ensure that the input value is correctly passed to the form library and that the library’s validation rules are compatible with the formatted currency input.

Q: How do I prevent users from entering more than two decimal places?

A: The maxLength prop can be used to limit the total number of characters, including the decimal separator. However, more precise control over decimal places might require additional validation within your onValueChange handler or by using a library that offers more granular control.

Conclusion

The react-currency-input-field package offers a straightforward and efficient solution for handling currency input in your Next.js projects. By following the steps outlined in this tutorial, you can easily integrate this package and provide a better user experience for your users. Remember to prioritize accessibility and customization to create a currency input that meets your specific needs and provides a seamless experience for all. With its ease of use and flexibility, this package is an invaluable tool for any developer working with monetary values in their web applications. As you continue to develop your applications, consider the user experience, making sure the currency input is intuitive and straightforward. This will significantly improve the overall usability of your forms and contribute to a more positive user journey. Using this package helps streamline the process, ensuring accuracy and a polished presentation of financial data, making your applications more user-friendly and professional.

More posts