Skip to content

Instantly share code, notes, and snippets.

@WebMaestroFr WebMaestroFr/TimeAgo.js
Last active Aug 6, 2019

Embed
What would you like to do?
A React component to display timestamps as "time ago" strings.
import React, {Component} from 'react';
const SECOND = 1000,
MINUTE = SECOND * 60,
HOUR = MINUTE * 60,
DAY = HOUR * 24,
MONTH = DAY * 30,
YEAR = DAY * 365;
export const getTimeAgoString = (timestamp) => {
const elapsed = Date.now() - timestamp,
getElapsedString = (value, unit) => {
const round = Math.round(elapsed / value);
return `${round} ${unit}${round > 1
? 's'
: ''} ago`;
};
if (elapsed < MINUTE) {
return getElapsedString(SECOND, 'second');
}
if (elapsed < HOUR) {
return getElapsedString(MINUTE, 'minute');
}
if (elapsed < DAY) {
return getElapsedString(HOUR, 'hour');
}
if (elapsed < MONTH) {
return getElapsedString(DAY, 'day');
}
if (elapsed < YEAR) {
return getElapsedString(MONTH, 'month');
}
return getElapsedString(YEAR, 'year');
};
export default class TimeAgo extends Component {
state = {
datetime: null,
string: ""
};
setDateTime = ({timestamp}) => {
const date = new Date(timestamp);
this.setState({datetime: date.toISOString(), string: getTimeAgoString(timestamp)});
};
componentDidMount() {
this.setDateTime(this.props);
}
componentWillReceiveProps(props) {
this.setDateTime(props);
}
shouldComponentUpdate(props, {datetime}) {
return datetime !== this.state.datetime;
}
render() {
const {datetime, string} = this.state;
return <time dateTime={datetime}>{string}</time>;
}
}
@Isaac1m

This comment has been minimized.

Copy link

commented Nov 6, 2018

Found this helpful, thanks! Might want to change the prop validation for timestamp to

TimeAgo.propTypes = {
    timestamp: PropTypes.instanceOf(Date).isRequired
};
@adrihle

This comment has been minimized.

Copy link

commented Jul 13, 2019

Wonderfull mate. im starting with react and i have a doubt,

i passed the props like timestamp, directly fetched from mysql default timestamp, but appear a error of type string, how can i do for do it correctly? thanks!

@WebMaestroFr

This comment has been minimized.

Copy link
Owner Author

commented Aug 6, 2019

Hi @Isaac1m, hi @adrihle,
Sorry for the very late reply, I haven't been on GitHub much lately.

Actually, the timestamp prop could be any accepted argument of a Date instance (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). I'll skip the prop validation for now, until I find some time to tune it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.