How to use react-number-format - 3 common examples

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import * as NumberFormat from "react-number-format";
import classnames from "classnames";

import { IContentCellProps } from "../table/cell";
import { Nullable } from "../typing";

// @ts-ignore https://github.com/s-yadav/react-number-format/issues/180
const NumberFormatComponent = NumberFormat.default || NumberFormat;

export const EDITED_CELL_CLASSNAME = "edited-cell";
export const KEYCODE_ENTER = 13;
const minInputWidth = 20; // Equal to the minimum editable cell underline width

export interface IMask {
  decimals: number;
  is_percentage: boolean;
  is_negative: boolean;
}

/**
 * initial_value is required to differentiate
 * the case when input is set to value "0"
 * and the case when input isn't setted yet and the value is "null"
 *

EnhancedInput,
  withMargin,
} from "@crave/farmblocks-input-text";

const EnhancedCurrencyInput = compose(
  withMargin,
  EnhancedInput,
)(ReactNumberFormat);

EnhancedCurrencyInput.propTypes = {
  ...ReactNumberFormat.propTypes,
  ...TextInput.propTypes,
};

EnhancedCurrencyInput.defaultProps = {
  ...ReactNumberFormat.defaultProps,
  ...TextInput.defaultProps,
  thousandSeparator: ",",
  decimalSeparator: ".",
  decimalScale: 2,
  fixedDecimalScale: true,
  allowNegative: false,
};

export default EnhancedCurrencyInput;

import { compose } from "recompose";
import ReactNumberFormat from "react-number-format";
import TextInput, {
  EnhancedInput,
  withMargin,
} from "@crave/farmblocks-input-text";

const EnhancedCurrencyInput = compose(
  withMargin,
  EnhancedInput,
)(ReactNumberFormat);

EnhancedCurrencyInput.propTypes = {
  ...ReactNumberFormat.propTypes,
  ...TextInput.propTypes,
};

EnhancedCurrencyInput.defaultProps = {
  ...ReactNumberFormat.defaultProps,
  ...TextInput.defaultProps,
  thousandSeparator: ",",
  decimalSeparator: ".",
  decimalScale: 2,
  fixedDecimalScale: true,
  allowNegative: false,
};

export default EnhancedCurrencyInput;