1
Install and Configure the Entry Point of react-intl
4m 21s
2
Convert a Hard Coded String using react-intl FormattedMessage
4m 11s
3
Render Content with Placeholders using react-intl FormattedMessage
3m 35s
4
Render Content with Markup Using react-intl FormattedHTMLMessage
1m 20s
5
Format Date and Time Using react-intl FormattedDate and FormattedTime
2m 21s
6
Format a Date Relative to the Current Date Using react-intl FormattedRelative
2m 11s
7
Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
2m 28s
8
Render Content Based on a Number using react-intl FormattedMessage
3m 36s
9
Use a react-intl Higher Order Component to format messages and get current locale
3m 32s
10
Write tests for react-intl output using enzyme and Jest
7m 30s
11
Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
3m 10s

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

React15 - 16.8.4

Share this video with your friends

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.

Course

Add Internationalization (i18n) to a React app using React Intl

Vijay P R

~ 4 years ago

Does FormattedRelative cause re-render ? Checked with react-dev-tools and couldn't find component getting updated . Is it directly manipulated via refs ?