Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
react-number-format
Advanced tools
Weekly downloads
Package description
The react-number-format package is a React component designed for formatting number input fields. It allows users to format numbers as currency, percentages, decimals, phone numbers, credit card numbers, and other custom formats. It also supports features like custom prefix, suffix, and thousand separator, masking, and custom formatting.
Number Formatting
This feature allows you to format numbers with thousands separators and add a prefix. In this example, the number 2456981 is formatted as currency with a dollar sign prefix and commas as thousand separators, displayed as $2,456,981.
import NumberFormat from 'react-number-format';
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
Custom Format
This feature enables custom formatting for inputs. Here, the format prop defines the pattern for a phone number and the mask prop is used for placeholder characters, allowing users to enter a phone number in the format ###-###-####.
import NumberFormat from 'react-number-format';
<NumberFormat format="###-###-####" mask="_" />
Currency Formatting
This feature is used to format input as currency. It includes a thousand separator, a dollar sign prefix, and ensures that there are always two decimal places.
import NumberFormat from 'react-number-format';
<NumberFormat thousandSeparator={true} prefix={'$'} decimalScale={2} fixedDecimalScale={true} />
Cleave.js is a library that can format input text content when you are typing. It provides similar functionalities to react-number-format, such as number formatting, credit card formatting, phone number formatting, and date formatting. It differs in that it is not React-specific and can be used with plain JavaScript or other frameworks.
Numeral is a library for formatting and manipulating numbers. It's similar to react-number-format in that it can format numbers as currency, percentages, and other formats. However, it is not a React component and does not handle input fields directly. It is more focused on number manipulation and formatting in general JavaScript applications.
Currency.js is a small and lightweight library for working with currency values. It allows you to perform arithmetic operations and formatting on currency numbers. While it provides similar currency formatting capabilities, it does not come as a React component and is more suited for general arithmetic and formatting operations rather than handling user input.
Readme
React Number Format is an input-formatter library with a sophisticated and light weight caret engine. It ensures that a user can only enter text that meets specific numeric or string patterns, and formats the input value for display.
See the many DEMO sections in the documentation.
Using npm
npm install react-number-format
Using yarn
yarn add react-number-format
Read the full documentation here https://s-yadav.github.io/react-number-format/docs/intro
Numeric Format
import { NumericFormat } from 'react-number-format';
NumericFormat Props: https://s-yadav.github.io/react-number-format/docs/numeric_format
Pattern Format
import { PatternFormat } from 'react-number-format';
PatternFormat Props: https://s-yadav.github.io/react-number-format/docs/pattern_format
https://s-yadav.github.io/react-number-format/docs/migration
npm i -g yarn
to download Yarnyarn
to install dependenciesyarn start
to run example server (http://localhost:8084/)yarn test
to test changesyarn build
to bundle filesTest cases are written in jasmine and run by karma
Test files : /test/**/*.spec.js
To run test : yarn test
FAQs
React component to format number in an input or as a text.
The npm package react-number-format receives a total of 727,793 weekly downloads. As such, react-number-format popularity was classified as popular.
We found that react-number-format demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.