Build a Currency Converter in React: Live Rates & Clean UX

Introduction to Building a Currency Converter in React

Creating a currency converter in React can be straightforward, especially when you leverage APIs that provide real-time exchange rates. In this guide, we will walk through how to build a robust currency converter featuring live rates, debounced inputs, and a clean user interface using the CurrencyRest API.

Why Use CurrencyRest API?

CurrencyRest offers a comprehensive REST API that provides real-time and historical exchange rates for over 190 fiat currencies and 94 cryptocurrencies. With the free tier allowing 300 requests per month, it's perfect for developers looking to experiment without incurring costs.

Step 1: Setting Up React

Firstly, create a new React app using Create React App:

npx create-react-app currency-converter
cd currency-converter

Step 2: Install Axios

For handling API requests, we recommend using Axios. Install it using npm:

npm install axios

Step 3: Building the Converter Component

Create a Converter.js component. It will manage the state and API calls necessary for converting currencies.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Converter = () => {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState(1);
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      setLoading(true);
      const response = await axios.get(`https://api.currencyrest.com/api/v1/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}`);
      setResult(response.data.result);
      setLoading(false);
    };
    fetchExchangeRate();
  }, [fromCurrency, toCurrency, amount]);

  return (
    <div>
      <h2>Currency Converter</h2>
      <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
      <select value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        
        {/* Add more options here */}
      </select>
      <span>to</span>
      <select value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
        
        {/* Add more options here */}
      </select>
      {loading ? <p>Loading...</p> : <p>Converted Amount: {result}</p>}
    </div>
  );
};

export default Converter;

Step 4: Integrating Debounced Inputs

To enhance user experience, we can implement debouncing for our input fields, preventing excessive API calls when users are typing. You can use lodash's debounce method for this function:

npm install lodash

In the Converter.js, implement debounced inputs for both currency selection and amount input.

Step 5: Enhancing the UX

A clean UX is essential. Ensure your component is responsive and easy to navigate. Use CSS or frameworks like Bootstrap to style your application.

Conclusion

Building a currency converter in React is an exciting project that can help you understand how to work with APIs effectively. By utilizing the CurrencyRest API, you can easily access live rates and historical data for your application.

Interested in building more applications? Sign up for CurrencyRest today and get 300 requests/month for free!