Today we will see a very popular and easy-to-use library that allows us to convert and manipulate numbers.
Many times we need to display numbers like 1400 to 1.4k, 1000000 to 1M which may be numbers of views, likes or comments.
Sometimes we need to add commas in long numbers to easily understand it.
It's very difficult to handle all the scenarios ourselves.
So to make our task easier there is a library known as Numeral.
Let's understand how to use it.
There are two ways of using it.
- include the CDN in a script tag
- install it as an npm package
We will use the second way of npm.
To install the package, execute the following command:
npm install numeral
OR
yarn add numeral
Import the library
import numeral from "numeral"; // ES6
OR
const numeral = require('numeral'); // Nodejs
Get the number in comma-separated format
const commaSeparated = numeral(50000).format("0,0");
console.log(commaSeparated); // 50,000
Get the number in k(thousand), m(million) format
const kFormatted = numeral(23000).format("0a");
const mFormatted = numeral(1230974).format("0.000a");
console.log(kFormatted); // 23k
console.log(mFormatted); // 1.321m
Get the numbers in the ordinal format
const ordinal = numeral(23).format("0o");
console.log(ordinal); // 23rd
Get the number in MB, GB format
const bytes = numeral(2348895676).format("0.00b");
console.log(bytes); // 2.35GB
Get the number in exponential format
const exponential = numeral(676565765722).format("0,0e+0");
console.log(exponential); // 7e+11
To explore other formats and examples visit http://numeraljs.com/.
Thanks for reading!
Check out my recently published Mastering Redux course.
In this course, you will build 3 apps along with a food ordering app and you'll learn:
- Basic and advanced Redux
- How to manage the complex state of array and objects
- How to use multiple reducers to manage complex redux state
- How to debug Redux application
- How to use Redux in React using react-redux library to make your app reactive.
- How to use redux-thunk library to handle async API calls and much more
and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
