# react-currency-converter-plus

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

Latest version **1.1.1** (published 2024-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-currency-converter-plus
pnpm add react-currency-converter-plus
yarn add react-currency-converter-plus
bun add react-currency-converter-plus
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2024-04-07 |
| First published | 2024-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 73.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Niranjan Kushwaha |
| Maintainers | niranjankushwaha |
| Keywords | react, currency-converter, react-currency-converter, currency, converter, exchange, money, forex, finance, currency conversion, exchange rate, react component, currency exchange, money converter, foreign exchange, currency calculator, currency rates, currency swap, currency trading, digital currency, crypto, cryptocurrency, blockchain, fiat currency, currency pair, exchange platform, financial tool, currency api, real-time rates, currency data, currency market, international currency, currency symbols, currency value, currency conversion api, currency exchange rates, currency conversion rates, currency exchange calculator, currency conversion calculator, global currency, world currency, currency list, currency code, currency format, currency denomination, currency conversion tool, currency exchange tool, currency exchange service, online currency converter, web currency converter, react currency library, react currency package, react exchange rate component, react finance component, react forex component, currency analytics, currency insights, currency trends, currency forecast, currency historical data, currency comparison, multi-currency, cross-currency, currency conversion functionality, currency exchange functionality, currency utilities, currency widgets, currency exchange widgets, financial applications, ecommerce currency, payment currency, transaction currency, currency conversion for developers, currency exchange for developers, currency API integration, currency conversion API integration, currency exchange API integration, react native currency converter, mobile currency converter, desktop currency converter, currency conversion solutions, currency exchange solutions, currency management, currency operations, currency transactions, currency exchange operations, currency conversion operations, currency rate updates, live currency rates, currency exchange rates API, currency conversion rates API, currency rate tracking, currency rate monitoring, currency exchange rate tracking, currency exchange rate monitoring, currency news, currency updates, currency alerts, currency notifications, currency rate alerts, currency rate notifications, currency exchange alerts, currency exchange notifications, currency rate comparison, currency exchange comparison, currency rate analysis, currency exchange analysis, currency rate charts, currency exchange charts, currency rate graphs, currency exchange graphs, currency rate history, currency exchange history, currency rate trends, currency exchange trends |

## Links

- npm: https://www.npmjs.com/package/react-currency-converter-plus
- Repository: https://github.com/NiranjanKushwaha/react-currency-convert
- Homepage: https://github.com/NiranjanKushwaha/react-currency-convert#readme
- Issues: https://github.com/NiranjanKushwaha/react-currency-convert/issues
- npm.io page: https://npm.io/package/react-currency-converter-plus

## Dependencies (3)

- [react](https://npm.io/package/react.md) >=16.8.0
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.3
- [react-dom](https://npm.io/package/react-dom.md) >=16.8.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2024-04-07
- 1.1.0 — 2024-04-07

## README

# 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:

```bash

npm install react-currency-convert

```

or if you use yarn:

```bash

yarn add react-currency-convert

```

## Usage

First, import the `CurrencyConverter` component into your React component file:

```javascript

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:

```javascript

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:

```javascript

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.

---
_Source: https://npm.io/package/react-currency-converter-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
