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.

• 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.

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

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;

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".

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;

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

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.