react-pretty-numbers v3.0.0

react-pretty-numbers

A React component to display numeric data in various formats. This may include currencies, percentages and large numbers.

e.g. it can output number 25300 as 25.3k

DEMO

Overview

A minimal usage will just display the numeric value

let myNumber = 123456;
<NumericLabel>{myNumber}</NumericLabel>;

Other options can be passed in as params like so:

let params = {
  justification: 'L',
  locales : 'en-AU'
  currency: true,
  currencyIndicator: 'USD$',
  percentage: false,
  precision: 2,
  commafy: false,
  shortFormat: true,
  title: true,
  cssClass: ['class1', 'class2']
};
<NumericLabel params=params>123</NumericLabel>;

Params in more detail:

justification

• Optional parameter to justify text

locales

• Optional parameter to provide locale

Default to 'en-AU'

currency

• Optional parameter to provide currency format for numbers

currencyIndicator

• Optional parameter to provide currency indicator

if the currency: parameter is set to true and no value is supplied here, default to a dollar sign $

percentage

• Optional parameter to provide percentage format for numbers

precision

• Optional parameter to provide number of decimal places

wholenumber

• Optional parameter to provide rounding for numbers (to an integer value, no decimal place)

commafy

• Optional parameter to add commas to large number for readability

shortFormat

• Optional parameter to output the numbers in short format like 2.1k instead of 2100

shortFormatMinValue

• Optional parameter to output the numbers in short format just in case if the number higher or equal to shortFormatMinValue

shortFormatPrecision

• Optional parameter to provide number of decimal places for shortend numbers

title

• Optional parameter to show some title on mouseover

cssClass

• Optional parameter to add one or more css classes to the surrounding div

Features

• Display numbers with precision.
• Display numbers as currency.
• Display numbers as percentage.
• Display shorten numbers (like 2k).
• Display titles on mouseover.
• Justification and Styling of numbers.
• Runs in the browser and Node.js.
• Built on standards.

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import NumericLabel from 'react-pretty-numbers';

class App extends Component {
	constructor(props){
		super(props);
	}

	render() {
	    var option = {
	      'justification':'C',
	      'locales':'en-AU',
	      'currency':true,
	      'currencyIndicator':'AUD',
	      'percentage':false,
	      'precision':2,
	      'wholenumber':null,
	      'commafy':true,
	      'shortFormat':true,
	      'shortFormatMinValue': 100000,
          'shortFormatPrecision': 1,
	      'title':true,
	      'cssClass':['red']
	    };
		return(
			<div className='numeric-wrapper'>
		      <h2>Numeric Label Component</h2>
		      <NumericLabel params={option}>1243.2155</NumericLabel>
		      <NumericLabel>123</NumericLabel>
			</div>
		);
	}
}

ReactDOM.render(<App />,document.querySelector('.container'));

Technology Stack:

• react
• mocha

Usage:

Clone the repo as a new project:

git clone https://github.com/pvoznyuk/react-pretty-numbers.git <numeric-label>

Start Server:

First you have to replace the lib/component/numeric_label.js to server.js in package.json
cd numeric-label
npm i
npm start

Run App:

npm start command automatically initiate browser at 3000 port
http:://localhost:3000

Run tests:

cd numeric-label
npm i
npm test

Developer Notes:

Make sure you configure your editor/IDE to use:

.editorconfig
.eslintrc