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>; | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
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! |
This comment has been minimized.
This comment has been minimized.
Hi @Isaac1m, hi @adrihle, Actually, the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Found this helpful, thanks! Might want to change the prop validation for
timestamp
to