Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Format a Date Relative to the Current Date Using react-intl FormattedRelative

    Damon BauerDamon Bauer

    Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human readable format, such as “2 days ago”, in various languages.

    We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.

    15 - 16


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:01 Let's start by importing formattedRelative from React Intl, and we'll use this component to render a human-readable representation of a user's review. Below the formattedTime component, let's add a formattedRelative component. This also takes a value prop, and we're going to pass it the same date as formattedTime.

    00:26 We'll say new date, that's going to be, and I'll also add a BR tag here. With that one component, that's all we need to get the human-readable string interpretation of that date in every different language.

    00:44 By default, this component will automatically re-render at a maximum of every 10 seconds. Let's change the date of this first review so that we can see that happen in real time.

    00:56 Now we can add an updateInterval prop, and we'll provide a value of 1,000, which is 1,000 milliseconds, or one second. I'll also set the value to new date, so you can see this component being re-rendered.

    01:12 Now you can see that every second this component is updating with the time offset from the value that we provided. You wouldn't want to use updateInterval of one second in production, because it would cause unnecessary re-renders. If we go back to what we had, let's say this review was set two minutes ago.

    01:41 If you set your interval to one second, it's going to re-render that component, but it's got nothing useful to show, because it's only going to say two minutes ago, even though every second has ticked past, so be careful using that in production.

    01:56 Finally, let's add a prop of style, and we'll provide it a value of numeric. This ensures that a value is always displayed here, as in 1 month ago, instead of saying last month.