Headless Currency Input Component For React

Description:

A customizable and feature-rich React component for handling currency input.

It supports multiple currencies and formatting and provides a seamless user experience for handling currency values.

How to use it:

1. Install and import the CurrencyInput component into your React project.

# Yarn
$ yarn add headless-currency-input
# NPM
$ npm install headless-currency-input
# PNPM
$ pnpm add headless-currency-input

import React from 'react';
import { CurrencyInput } from 'headless-currency-input';

2. In your app:

const App = () => {
  const [values, setValue] = React.useState(123456789);
  return (
    <CurrencyInput
      value={value}
      onValueChange={(values) => {
        console.log(values);
        /**
         * Output:
         *
         * {
         *  formattedValue: "$ 1,234,567.89",
         *  value: '1234567.89',
         *  floatValue: 1234567.89,
         * }
         */
      }}
      currency="USD"
      locale="en-US"
    />
  );
};

3. All possible props:

<CurrencyInput
  value={value}
  onValueChange={(values) => {
  }}
  isAllowed={(values) => {
  }}
  currency="USD"
  locale="en-US"
  displayType="text or input"
  renderText={(value) => <b>{value}</b>}
/>

Preview: