Displaying numbers as k, M values in Reactjs

Displaying numbers as k, M values in Reactjs

ยท

2 min read

SI Prefixs are everywhere. Facebook Likes, Twitter Reweets YouTube Views etc. See the example below to understand what I mean.

Example:

BeforeAfter
1000 Views1k Views
25000 Likes25K Likes
30000 Retweets30k Retweets

In this post we will see how we can convert the numbers to shortern numbers.

๐ŸŽ‰ Make sure to bookmark this for later

We are going to use React for this example, But this works on all nodejs projects

Create a react app

npx create-react-app numbers

Wait until the project gets created.

cd into the directory

cd numbers

Install the required dependency

yarn add numify

or

npm install numify --save

Now in the App.js file paste the below code.

import "./styles.css";
import { numify } from "numify"; //Importing numify package
import { useState, useEffect } from "react";

export default function App() {
  const [number, setNumber] = useState(null);

  useEffect(() => {
    // Change the Number as per your choice
    setNumber(numify(2700000000));
  }, []);

  return (
    <div className="App">
      <h1>2700000000 will be rendered as {number}</h1>
    </div>
  );
}

Then, Run the Project using the command

npm run start

Once the project is started, You'll see this in browser.

Output

I hope you find this useful, Please drop a heart and leave your comments.

๐ŸŽ‰ Make sure to bookmark this for later

ย