react-currency-converter-plus

React Currency Converter

A lightweight and customizable currency converter component for React applications. Easily integrate currency conversion functionality with customizable dropdowns for selecting currencies and an input for the amount.

Features

• Customizable currency dropdowns for both "from" and "to" currencies.
• Customizable button text for performing the conversion.
• Restriction on the number of digits allowed in the amount input.
• Callback function to handle the conversion logic externally.

Installation

To install the React Currency Converter, run the following command in your project directory:

npm install react-currency-convert

or if you use yarn:

yarn add react-currency-convert

Usage

First, import the CurrencyConverter component into your React component file:

import React from 'react';
import { CurrencyConverter } from 'react-currency-convert';

Then, use the CurrencyConverter component in your React application. You must provide a callback function (onConvert) to handle the conversion logic:

import React from 'react';
import { CurrencyConverter } from 'react-currency-convert';

const App = () => {
  const handleConversion = (fromCurrency, toCurrency, amount) => {
    // Implement your conversion logic here
    console.log(`Convert ${amount} from ${fromCurrency} to ${toCurrency}`);
  };

  return (
    <div>
      <CurrencyConverter onConvert={handleConversion} />
    </div>
  );
};

export default App;

Props

The CurrencyConverter component accepts the following props for customization:

• onConvert: A function that is called when the conversion button is clicked. It receives three arguments: fromCurrency, toCurrency, and amount.
• fromCurrencyDropdownData (optional): An array of strings representing the currencies available in the "from" dropdown. Default is ["USD", "EUR", "INR", "GBP"].
• toCurrencyDropdownData (optional): An array of strings representing the currencies available in the "to" dropdown. Default is ["USD", "EUR", "INR", "GBP"].
• allowedAmountDigitsCount (optional): A number representing the maximum number of digits allowed in the amount input. Default is 7.
• convertCurrencyBtnText (optional): A string to customize the text of the conversion button. Default is "Convert Currency".

Example

Here's a complete example showing how to use the CurrencyConverter component with custom props:

import React from 'react';
import { CurrencyConverter } from 'react-currency-convert';

const App = () => {
  const handleConversion = (fromCurrency, toCurrency, amount) => {
    // Conversion logic
    alert(`Converting ${amount} from ${fromCurrency} to ${toCurrency}`);
  };

  return (
    <CurrencyConverter
      onConvert={handleConversion}
      fromCurrencyDropdownData={["USD", "CAD", "EUR"]}
      toCurrencyDropdownData={["INR", "JPY", "GBP"]}
      allowedAmountDigitsCount={5}
      convertCurrencyBtnText="Exchange"
    />
  );
};

export default App;

Contributing

Contributions are welcome! Please feel free to submit a pull request or create an issue for any bugs or feature requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Feel free to adjust the content to better fit your component's functionality or to add any additional sections that you think might be helpful for users.