How to show minutes ago in a React application

What is time ago?

You have most likely seen posts, comments, and chats that show when they were sent1 minute ago, 2 minutes ago, 1 hour ago, etc.. We will be looking at how to implement this with React.

What module will we use?

We will use the javascript-time-ago module. Head over here to learn more about this npm package on npm.

Let’s start

1. Install the javascript-time-agomodule

Open your console and run the following command to install this module:

npm install javascript-time-ago

2. Create a starter code

import React,{useState} from 'react';
function App() {
  return (
    <div style={{textAlign:"center",marginTop:"50px"}}>
      <input type="datetime-local" min="2018-06-07T00:00" max={new Date()}/>
      <Time/>
    </div>
  )
}
export default App;

In our App.js or App.jsx, we created an input that will take only datetime-localThis means that we will work with date included with time.. We also created the minimum and maximum values of our datetime.

3. Import javascript-time-ago

import React,{useState} from 'react';
// importing the javascript-time-ago module
import TimeAgo from "javascript-time-ago";
import en from 'javascript-time-ago/locale/en'  //This is because we want our display in english format
function App() {
  return (
    <div style={{textAlign:"center",marginTop:"50px"}}>
      <input type="datetime-local" min="2018-06-07T00:00" max={new Date()}/>
      <Time/>
    </div>
  )
}
export default App;

From the code above, we imported the javascript-time-ago module and en. The en allows us to display our time in the English language.

4. Create time and selectedTime States with usestate

const [selectedTime, setSelectedTime] = useState(new Date());
const [time, setTime] = useState(new Date());

Both the value displayed on the screen and the formatted time will be time. The selectedTime will be the value selected by the user.

5. Create the onChangeTime function

This will change the set value of selectedTime. Then, attach this function to the input.

 const onChangeTime = (e)=>{
    setTime(e.target.value)
  }

6. Create the time component

This will format the selected time of the user and display it on the screen. Lastly, add it to the App.js.

const Time = ()=>{
    TimeAgo.addLocale(en);
    // Create a new instance
    const timeAgo = new TimeAgo("en-US");
    const inSeconds = new Date(time).getTime();
    const minutesAgo = timeAgo.format(inSeconds - 60 * 1000);
   
    return(
      <p style={{textAlign:"center",position:"absolute",bottom:"0px",width:"100%"}}>{minutesAgo}</p>
    )
}

In the code above, en is chosen to be the language. A new instance of timeAgo is created, and the selected time of the user is converted to seconds so that we can format it with the javascript-time-ago module. Finally, we preview it with a paragraph tag.

Final code

Below is our final code!

import React,{useState} from 'react';
// importing the javascript-time-ago module
import TimeAgo from "javascript-time-ago";
import en from 'javascript-time-ago/locale/en'  //This is because we want our display in english format
function App() {
  const [selectedTime, setSelectedTime] = useState(new Date());
  const [time, setTime] = useState(new Date());
  const Time = ()=>{
    TimeAgo.addLocale(en);
    // Create a new instance
    const timeAgo = new TimeAgo("en-US");
    const inSeconds = new Date(time).getTime();
    const minutesAgo = timeAgo.format(inSeconds - 60 * 1000);
   
    return(
      <p style={{textAlign:"center",position:"absolute",bottom:"0px",width:"100%"}}>{minutesAgo}</p>
    )
  }
  const onChangeTime = (e)=>{
    setTime(e.target.value)
  }
  return (
    <div style={{textAlign:"center",marginTop:"0px"}}>
      <input type="datetime-local"  onChange={onChangeTime}  min="2018-06-07T00:00" max={new Date()}/>
      <Time/>
    </div>
  )
}
export default App;

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)