Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-number-format

Package Overview
Dependencies
Maintainers
0
Versions
120
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-number-format

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

  • 5.4.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created

What is react-number-format?

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.

What are react-number-format's main functionalities?

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} />

Other packages similar to react-number-format

Keywords

FAQs

Package last updated on 25 Aug 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc