React Currency Hooks

This libraries propose to introduce two pseudo hooks, one capable of format currencies and another capable to simulate a cash register.

Live Demo

On Code Sandbox

Install

  npm install react-hook-currency  # or yarn add react-hook-currency

Browser compatibility (Tested)

| Chrome | Edge | Firefox | Safari | IE 11 | | :----------------- | :----------------- | :----------------- | :----------------- | :----------------- | | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |

How to use

Currency formatter

Controlled Input

import React from 'react';
import { useCurrency } from 'react-hook-currency';

const ControlledInputCurrency = () => {
  const { onClick, onChange, onKeyDown, format, toNumber } = React.useMemo(
    () => useCurrency(),
    []
  );
  const [value, setValue] = React.useState(format('000'));

  return (
    <input
      type="text"
      onChange={e => {
        onChange(e);
        console.log(toNumber(e.target.value)); // Number
        setValue(e.target.value);
      }}
      onKeyDown={onKeyDown}
      onClick={onClick}
      value={value}
    />
  );
};

Uncontrolled Input

const UncontrolledInputCurrency = () => {
  const { onClick, onChange, onKeyDown, format } = React.useMemo(
    () => useCurrency(),
    []
  );
  const ref = React.useRef<HTMLInputElement>(null);

  return (
    <input
      type="text"
      onChange={onChange}
      onKeyDown={onKeyDown}
      onClick={onClick}
      defaultValue={format('000')}
      ref={ref}
    />
  );
};

Cash Register

Uncontrolled Input

import React from 'react';
import { useCurrencyRegister } from 'react-hook-currency';

const UncontrolledInputCashRegister = () => {
  const { onClick, onChange, onKeyDown, format } = useCurrencyRegister();
  const ref = React.useRef<HTMLInputElement>(null);

  return (
    <input
      type="text"
      onClick={onClick}
      onChange={onChange}
      onKeyDown={onKeyDown}
      defaultValue={format('000')}
      autoFocus={true}
      ref={ref}
    />
  );
};

Options

Options hooks

| Props | Default Value | Description | | ----------- | ------------- | ------------------------------------------- | | precision | 2 | Fraction Digits | | style | currency | currency or decimal(Remove symbol) | | locale | pt-BR | Country Code Reference(Currency symbol) | | currency | BRL | String i18n(Format Type) | | negative * | allow | allow, always, never |

Note: *not present in useCurrencyRegister

Return hooks

| Return | Type | | ---------------- | ------------------ | | onClick | Function => void | | onChange | Function => void | | onKeyDown | Function => void | | format | Function => void | | decimalSeparator | string | | toNumber | Function => number | | triggerChange * | Function => void |

Note: *not present in useCurrency

Contributing

Fell free to contribute. Create a branch, add commits, and open a pull request.