Using date-fns quickly Dates in react

Brief: Date-fns is a package used to display a date string from date object, it provide better performance thena date object. It is much easier to use .

 in our use case it mostly use to convert timestamp normal dates in in the below example we have used to calculate distance from current time example: 3 days ago

Installation:

Yarn add date-fns

Tutorial

Date-fns is bit tricky to use at first.

Here are the steps to use it quickly

Code:

import {formatDistance} from 'date-fns';
const newsUploadTime = formatDistance(
    new Date(item?.created_at),
    new Date(),
    {
      addSuffix: true,
    },
  );

Here item.created_at is a ISO timestamp e.g. 2022-04-17T16:29:03+00:00

It is needed to create a new date object from this timestamp To use with dateFNS functions.

Format distance take 2 parameters   first is main date and second is the current date to compare with

Link: https://date-fns.org/v2.28.0/docs/formatDistance

For using it to generate a normal date string. Eg. 2022-04-20, 22 march 2022

Code:

Const date = item.created_at;
format(parseISO(date), "dd-MM-yyyy"));

As we can see parseISO function is used to get the date object from the timestamp string.

• Link: https://date-fns.org/v2.28.0/docs/format
• Stackoverflow: https://stackoverflow.com/questions/64362242/how-to-format-date-with-date-fns