https://github.com/aurelticot/react-advanced-number
React component displaying a number with advanced options such as highlighting the differences with the previous value, a privacy mode, etc.
https://github.com/aurelticot/react-advanced-number
currency formatting number price privacy react
Last synced: about 1 month ago
JSON representation
React component displaying a number with advanced options such as highlighting the differences with the previous value, a privacy mode, etc.
- Host: GitHub
- URL: https://github.com/aurelticot/react-advanced-number
- Owner: aurelticot
- License: mit
- Created: 2021-03-21T21:22:38.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-20T22:11:49.000Z (about 5 years ago)
- Last Synced: 2025-02-22T10:19:08.886Z (over 1 year ago)
- Topics: currency, formatting, number, price, privacy, react
- Language: TypeScript
- Homepage:
- Size: 438 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-advanced-number
[](https://www.codacy.com/gh/aurelticot/react-advanced-number/dashboard?utm_source=github.com&utm_medium=referral&utm_content=aurelticot/react-advanced-number&utm_campaign=Badge_Grade)
[](https://www.codacy.com/gh/aurelticot/react-advanced-number/dashboard?utm_source=github.com&utm_medium=referral&utm_content=aurelticot/react-advanced-number&utm_campaign=Badge_Coverage)
[](https://github.com/aurelticot/react-advanced-number/actions/workflows/ci.yml)
React component formatting and displaying a number with advanced features such as highlighting the differences with the previous value, a privacy mode, etc.
The component has no dependency (except the obvious peer dep of react itself). The formatting relies on the [Intl.NumberFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). All the options of the API are provided as props of this component.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Formatting](#formatting)
- [Features](#features)
- [Privacy Mode](#privacy-mode)
- [Diff Highlighting](#diff-highlighting)
- [Muted Decimals](#muted-decimals)
- [Small Decimals](#small-decimals)
- [Styling](#styling)
- [All Together](#all-together)
- [License](#license)
## Installation
react-advanced-number is available as an [npm package](https://www.npmjs.com/package/react-advanced-number)
```
npm install react-advanced-number
```
## Usage
In it's simplest form:
```jsx
import React from "react";
import { AdvancedNumber } from "react-advanced-number";
function App() {
return ;
}
```
## Formatting
The component uses the native API [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). All the options are available as props.
```jsx
function App() {
return (
);
}
```
_Note_: the prop `significantDecimalDigits`, when provided, is a shorthand to overwrite both the props `options.minimumFractionDigits` and `options.maximumFractionDigits`.
_Note_: Check the browser support for the [Intl.NumberFormat API](https://caniuse.com/?search=NumberFormat).
## Features
### Privacy Mode
Blur the number when enabled. Perfect for sensitive information to be visually hidden/revealled when relevant.
```jsx
function App() {
return (
<>
>
);
}
```
The default shadow color is `#7C7C7CD9`, you can change it with the optional prop `privacyShadowColor`
```jsx
function App() {
return (
);
}
```
_Note_: currently, it only changes the CSS properties, the number is still in the markup.
### Diff Highlighting
Highlighting a difference between the value and a previous value. Interesting when displaying changing prices.
```jsx
function App() {
return ;
}
```
The default color for a positive difference is `#4CAF50` and for a negative difference is `#F44336`. You can change them with the optional props `positiveColor` and `negativeColor`.
```jsx
function App() {
const positive = "#03A9F4";
const negative = "#C238DA";
return (
<>
>
);
}
```
### Muted Decimals
Displaying muted decimals between a significant number and the total number of decimals. They are slightly lighter to distinguish them from the significant digits.
```jsx
function App() {
return (
);
}
```
If you wonder why, I think it's a nice way to homogenize the display of values with different significant number of decimals, as it happens often in price values.
```jsx
function App() {
return (
<>
>
);
}
```
_Note_: The feature requires the following to be enabled: `showMutedDecimals === true`, `maxDecimalDigits > significantDecimalDigits` and `options.notation === 'standard`.
_Note_: `significantDecimalDigits` is actually optional, a default value is defined by the [Intl.NumberFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat).
### Small Decimals
Represent the decimals smaller than the interger part for the number.
```jsx
function App() {
return ;
}
```
## Styling
The root element is a `span` receiving the props you will pass it to. Therefore `className` and `style` can be use to style the component.
```jsx
function App() {
return ;
}
```
## All Together
```jsx
function App() {
return (
);
}
```
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).