@bloombug/react-money

React components and hooks for @bloombug/money.

Installation

npm install @bloombug/react-money --save

yarn add @bloombug/react-money

React Native

If you're using React Native, you'll need to polyfill BigInt.

npm install big-integer --save

yarn add big-integer

// Somewhere at the top of your entry file. For example, ./App.tsx.
import BigInt from 'big-integer';

if (typeof global.BigInt === 'undefined') {
  global.BigInt = BigInt;
}

Getting started

To start, you must wrap your app or part of your app in your <MintProvider />.

import { Mint } from '@bloombug/money';
import currencies from '@bloombug/money/iso-currencies.json';
import { MintProvider } from '@bloombug/react-money';

const mint = new Mint({ currencies });

const App = () => {
  return (
    <MintProvider mint={mint}>
      <p>Inside this provider, you can use the hooks and components.</p>
      {/* The rest of your app */}
    </MintProvider>
  );
};

Components

MoneyText

This provides a simple formatted text version of your money.

import { MoneyText } from '@bloombug/react-money';

const Component = () => {
  return (
    <p>
      <MoneyText amount={100} currency="USD" />
      <MoneyText
        amount={100}
        currency="CAD"
        currencyDisplay="narrowSymbol"
        locale="en-CA"
      />
    </p>
  );
};

Hooks

useMint()

This returns the mint from the provider's context.

import { useMint } from '@bloombug/react-money';

const Component = () => {
  const { mint } = useMint();

  return <p>Component</p>;
};

useExchange()

This returns the exchange from the provider's context.

import { useExchange } from '@bloombug/react-money';

const Component = () => {
  const { exchange } = useExchange();

  return <p>Component</p>;
};

useCurrency()

This returns the currency from the provider's mint.

import { useCurrency } from '@bloombug/react-money';

const Component = () => {
  const { Currency } = useCurrency();

  return <p>{Currency('CAD').name}</p>;
};

useMoney()

This returns the money from the provider's mint.

import { useMoney } from '@bloombug/react-money';

const Component = () => {
  const { Money, formatMoney } = useMoney();

  return (
    <div>
      <p>{Money(100).toLocaleString()}</p>
      <p>{formatMoney('en-US', 100, 'CAD')}</p>
    </div>
  );
};

Docs

See docs site for more details, API, and other docs.