node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

react-npm-numeric-label

react-npm-numeric-label

A React component to display numeric data, in it's various formats. These may include currencies, percentages and large numbers.

npm Version Build Status

Overview

A minimal usage will just display the numeric value

let myNumber = 123;
<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
  cssClass: ['class1', 'class2']
};
<NumericLabel params=params>123</NumericLabel>;

Params in more detail:

justification

  • Optional parameter to justify text
Value Description Default
L Left justified
R Right justified *
C Centered

locales

  • Optional parameter to provide locale

Default to 'en-AU'

currency

  • Optional parameter to provide currency format for numbers
Value Description
true to include text dollar sign
and 2 decimals eg: 'usd $0.00'
false to have no format eg: '0.00'

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
Value Description
true to have 2 decimals and
include a percentage sign
eg: '00.00%'
false not format eg: '0.00'

precision

  • Optional parameter to provide number of decimal places
Value Description
Integer x to round to x decimal places
nil no rounding

wholenumber

  • Optional parameter to provide rounding for numbers (to an integer value, no decimal place)
Value Description
ceil to round up to the nearest whole number
floor to round down to the nearest whole number
nil no ceil or floor

commafy

  • Optional parameter to add commas to large number for readability
Value Description
true Commas will be include, eg: 10,000
false Commas will not be include, eg: 10000

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.
  • 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 NumericLable from 'react-npm-numeric-label';
 
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,
          'cssClass':['red']
        };
        return(
            <div className='numeric-wrapper'>
              <h2>Numeric Lable Component</h2>
              <NumericLable params={option}>1243.2155</NumericLable>
              <NumericLable>123</NumericLable>
            </div>
        );
    }
}
 
ReactDOM.render(<App />,document.querySelector('.container'));
 

Technology Stack:

  • react
  • mocha

Usage:

Clone the repo as a new project:

git clone https://github.com/lobdev/react-npm-numeric-label.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