
Security News
Open Source Maintainers Feeling the Weight of the EU’s Cyber Resilience Act
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
react-npm-numeric-label
Advanced tools
A react component to display numeric data, in it's various formats. These may include currencies, percentages and large numbers.
A React component to display numeric data, in it's various formats. These may include currencies, percentages and large numbers.
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>;
Value | Description | Default |
---|---|---|
L | Left justified | |
R | Right justified | * |
C | Centered |
Default to 'en-AU'
Value | Description |
---|---|
true | to include text dollar sign |
and 2 decimals eg: 'usd $0.00' | |
false | to have no format eg: '0.00' |
if the currency:
parameter is set to true
and no value is supplied here, default to a dollar sign $
Value | Description |
---|---|
true | to have 2 decimals and |
include a percentage sign | |
eg: '00.00%' | |
false | not format eg: '0.00' |
Value | Description |
---|---|
Integer x | to round to x decimal places |
nil | no rounding |
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 |
Value | Description |
---|---|
true | Commas will be include, eg: 10,000 |
false | Commas will not be include, eg: 10000 |
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'));
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
Make sure you configure your editor/IDE to use:
.editorconfig
.eslintrc
FAQs
A react component to display numeric data, in it's various formats. These may include currencies, percentages and large numbers.
The npm package react-npm-numeric-label receives a total of 6 weekly downloads. As such, react-npm-numeric-label popularity was classified as not popular.
We found that react-npm-numeric-label demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.