Skip to content

Instantly share code, notes, and snippets.

@RaddishIoW
Last active April 1, 2023 00:01
Show Gist options
  • Save RaddishIoW/08c74444f5872495fe53a16e779a1fe5 to your computer and use it in GitHub Desktop.
Save RaddishIoW/08c74444f5872495fe53a16e779a1fe5 to your computer and use it in GitHub Desktop.
A React Hooks-based component using Luxon to format a date to a relative string representation, updating that string once a minute.
import React from 'react'
import PropTypes from 'prop-types'
import { DateTime } from 'luxon'
const RelativeTime = (props) => {
const dt = DateTime.fromJSDate(props.time)
const [relTime, setRelTime] = useState(dt.toRelative())
const [intervalID, setIntervalID] = useState()
useEffect(() => {
let mounted = true
setIntervalID(setInterval(() => {
if (mounted) {
setRelTime(dt.toRelative())
}
}, 60000)
)
return function cleanup () {
mounted = false
clearInterval(intervalID)
}
}, [])
return (
<>
{relTime}
</>
)
}
RelativeTime.propTypes = {
time: PropTypes.instanceOf(Date)
}
export default RelativeTime
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment