https://github.com/s-yadav/react-number-format

React component to format numbers in an input or as a text.
https://github.com/s-yadav/react-number-format

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/s-yadav/react-number-format
• Owner: s-yadav
• License: mit
• Created: 2016-04-17T12:48:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-07-10T10:29:20.000Z (3 months ago)
• Last Synced: 2024-07-23T06:08:39.123Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 5.36 MB
• Stars: 3,827
• Watchers: 20
• Forks: 403
• Open Issues: 215
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Actions Status](https://github.com/s-yadav/react-number-format/workflows/CI/badge.svg)](https://github.com/s-yadav/react-number-format/actions)

# 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.

1. Input Masking.

1. Format number in an input or format as a simple text.

1. Custom pattern formatting.

1. Custom formatting handler.

1. Fully customizable

### Demos

See the many DEMO sections in [the documentation](https://s-yadav.github.io/react-number-format/docs/props).

### Install

[![npm](https://img.shields.io/npm/dm/react-number-format.svg)](https://www.npmjs.com/package/react-number-format)

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](https://s-yadav.github.io/react-number-format/docs/intro)

#### ES6

Numeric Format

```js

import { NumericFormat } from 'react-number-format';

```

NumericFormat Props: [https://s-yadav.github.io/react-number-format/docs/numeric_format](https://s-yadav.github.io/react-number-format/docs/numeric_format)

Pattern Format

```js

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/pattern_format)

### Migrate from v4 to v5

[https://s-yadav.github.io/react-number-format/docs/migration](https://s-yadav.github.io/react-number-format/docs/migration)

### v4 doc

[v4 Docs](https://github.com/s-yadav/react-number-format/blob/master/documentation/v4.md)

### 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 ()

- `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`