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

To help you get started, we’ve selected a few react-number-format examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Decathlon / react-table / src / components / styled-table / editable-cell.tsx View on Github external
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"
 *
github CraveFood / farmblocks / packages / input-currency / src / CurrencyInput.js View on Github external
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;
github CraveFood / farmblocks / packages / input-currency / src / CurrencyInput.js View on Github external
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;

react-number-format

React component to format number in an input or as a text.

MIT
Latest version published 2 months ago

Package Health Score

86 / 100
Full package analysis