Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-number-format' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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;