Money Input for Mantine UI

money-input.tsx

// calc values divided by 100, ex:
//  defaultValue={item.price / 100}
//  values.item.price / 100

import { forwardRef } from 'react'
import { CurrencyInput, ICurrencyMaskProps } from 'react-currency-mask'

import { MantineSize, TextInput, TextInputProps } from '@mantine/core'

type MoneyInputComponentProps = ICurrencyMaskProps &
  TextInputProps & {
    size?: MantineSize
  }

export const MoneyInputComponent: React.ForwardRefRenderFunction<HTMLInputElement, MoneyInputComponentProps> = (
  // eslint-disable-next-line react/prop-types
  { size = 'xs', ...rest },
  ref
) => {
  return <CurrencyInput ref={ref} {...rest} InputElement={<TextInput size={size} />} />
}

export const MoneyInput = forwardRef(MoneyInputComponent)

and yes. you should install react-currency-mask