React-Timeago Example : Show Elapsed Time in Sec, Min, Day, Months Years etc

Displaying time elapsed since a certain date is a common requirement in many web applications. “React-timeago” is a popular package that makes it easy to display the time elapsed in a user-friendly way. This package automatically updates the display as time passes, and also provides various customization options such as language and time units to display.

In this tutorial, you will learn how to use the “react-timeago” package in a React project, how to customize the output, and see various examples of how it can be used.

 

Step 1: Install the Package

You can install the “react-timeago” package using npm:

npm install react-timeago

 

Step 2: Import the Package

In your React component, import the package like this:

import TimeAgo from "react-timeago";

 

Step 3: Use the Component

To display the elapsed time, simply use the TimeAgo component and pass in the date that you want to show. For example:

const MyComponent = () => {
  const date = new Date("2021-01-01");

  return <TimeAgo date={date} />;
};

export default MyComponent;

 

Step 4: Customize the Output

You can customize the output by passing in different props. For example, you can change the language by using the locale prop:

const MyComponent = () => {
  const date = new Date("2021-01-01");

  return <TimeAgo date={date} locale="fr" />;
};

export default MyComponent;

You can also change the time units displayed using the units prop:

const MyComponent = () => {
  const date = new Date("2021-01-01");

  return <TimeAgo date={date} units="second" />;
};

export default MyComponent;

 

Here is a complete example of how to use the “react-timeago” package in a React project, along with various configurations and samples:

import React from "react";
import TimeAgo from "react-timeago";
import englishStrings from "react-timeago/lib/language-strings/en";
import frenchStrings from "react-timeago/lib/language-strings/fr";
import spanishStrings from "react-timeago/lib/language-strings/es";
import japaneseStrings from "react-timeago/lib/language-strings/ja";
import chineseStrings from "react-timeago/lib/language-strings/zh-CN";
import buildFormatter from "react-timeago/lib/formatters/buildFormatter";

const englishFormatter = buildFormatter(englishStrings);
const frenchFormatter = buildFormatter(frenchStrings);
const spanishFormatter = buildFormatter(spanishStrings);
const japaneseFormatter = buildFormatter(japaneseStrings);
const chineseFormatter = buildFormatter(chineseStrings);

import "./App.css";

function App() {
  const date1 = new Date("2021-01-01");
  const date2 = new Date("2022-01-01");

  return (
    <>
      <h2>English Language</h2>
      <TimeAgo date={date1} formatter={englishFormatter} />

      <h2>French Language</h2>
      <TimeAgo date={date1} formatter={frenchFormatter} />

      <h2>Spanish Language</h2>
      <TimeAgo date={date1} formatter={spanishFormatter} />

      <h2>Japanese Language</h2>
      <TimeAgo date={date1} formatter={japaneseFormatter} />

      <h2>Chinese Language</h2>
      <TimeAgo date={date1} formatter={chineseFormatter} />

      <h2>Two Dates Comparison</h2>
      <TimeAgo date={date1} formatter={englishFormatter} /> ago vs <TimeAgo date={date2} formatter={englishFormatter} /> ago
    </>
  );
}

export default App;

In this example, we import different language strings from react-timeago library, build the formatter for each language and then use it with the TimeAgo component.

This way, you can display the time difference in different languages, according to your requirements.

 

Some Common Issue with Troubleshooting

  1. Missing Locale Data: One of the common issues developers face is missing locale data. If you are using a language that is not supported by the react-timeago library, you may get an error message saying “No locale data has been registered for any of the locales.” To solve this issue, you can write your own locale data or add a locale data file from the community.
  2. Incorrect Time Difference: Sometimes, the time difference calculated by react-timeago may not be accurate. This can happen due to incorrect time zone settings or incorrect time values passed to the component. To solve this issue, make sure that you are passing the correct time value to the component and that your time zone is set correctly.
  3. Unexpected Formatting: Another issue developers face is unexpected formatting. For example, if you want the time difference to be displayed in minutes, but it’s being displayed in seconds. To solve this issue, you can pass the correct units prop to the component, specifying the units you want to display.
  4. Slow Performance: If you have a large number of TimeAgo components on the page, it can slow down the performance of your application. To solve this issue, you can make use of the minPeriod prop to limit the number of updates to the component.
  5. Unsupported Languages: react-timeago does not support all languages. If you want to display the time difference in a language that is not supported, you need to write your own locale data or use a community-driven locale data file.

These are some of the common issues and problems developers face with react-timeago, but with proper configuration and understanding of the component, they can easily be resolved.

 

Conclusion

In this tutorial, you learned how to use the “react-timeago” package in a React project to display time elapsed in a user-friendly way. You saw how to customize the output by changing the language and time units, and also saw various examples of how it can be used.

“React-timeago” is a powerful and efficient package that makes it easy to display time elapsed in a React project. Whether you’re a beginner or an experienced React developer, you can use this package to add this functionality to your project with ease.

 

Leave a Comment

Your email address will not be published. Required fields are marked *