react-number-format

React component to format numbers in an input or as a text.
GitHub
3.9k
Created 9 years ago, last commit 2 months ago
71 contributors
578 commits
Stars added on GitHub, month by month
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+3
Last week
+2.0
/day
Last month
+0.8
/day
Last 12 months
+0.6
/day
npmPackage on NPM
Monthly downloads on NPM
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
No dependencies
README

Actions Status

react-number-format

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.

Features

  1. Prefix, suffix and thousands separator.
  2. Input Masking.
  3. Format number in an input or format as a simple text.
  4. Custom pattern formatting.
  5. Custom formatting handler.
  6. Fully customizable

Demos

See the many DEMO sections in the documentation.

Install

npm

Using npm

npm install react-number-format

Using yarn

yarn add react-number-format

Documentation

Read the full documentation here https://s-yadav.github.io/react-number-format/docs/intro

ES6

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

Migrate from v4 to v5

https://s-yadav.github.io/react-number-format/docs/migration

v4 doc

v4 Docs

Development

  • Clone the repository or download the zip
  • npm i -g yarn to download Yarn
  • yarn to install dependencies
  • yarn start to run example server (http://localhost:8084/)
  • yarn test to test changes
  • yarn build to bundle files

Testing

Test cases are written in jasmine and run by karma

Test files : /test/**/*.spec.js

To run test : yarn test