Instantly share code, notes, and snippets.

Embed
What would you like to do?
A React component to display timestamps as "time ago" strings.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
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>;
}
}
TimeAgo.propTypes = {
timestamp: PropTypes.number.isRequired
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment