react-hook-currency v0.1.0

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)

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

Note: *not present in useCurrencyRegister

Return hooks

Note: *not present in useCurrency

Contributing

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