How to show minutes ago in a React application
Theodore Kelechukwu OnyejiakuWhat is time ago?
You have most likely seen posts, comments, and chats that show
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
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;Here is the live code. Feel free to change the dates and time and see the magic! π
RELATED TAGS
CONTRIBUTOR
Theodore Kelechukwu OnyejiakuView all Courses
