Início / coding / Perguntas / 76923185
Accepted
Unnikrishnan KJ
Asked: 2023-08-17 23:56:12 +0800 CST

Como mostrar o tempo relativo no projeto react.js

  • 772

Estou construindo um aplicativo de mídia social usando next.js. Eu quero exibir o tempo relativo em meu projeto.

Saída esperada:

agora há 2 minutos 1 hora atrás 2 dias

Eu quero recuperar o tempo do MongoDBdocumentodocumento

Tentei usar momente dayjs, mas estou enfrentando alguns problemas para começar. Alguém pode me ajudar?

reactjs

2 respostas

  1. Best Answer

    Você pode usar react-timeago :

    import TimeAgo from 'react-timeago';

...
<TimeAgo date={date} />

    Isso gerará o texto gerado automaticamente que se parece com:

    2 minutes ago
3 days ago
4 months ago
1 year ago

    Eles também oferecem suporte a opções de formatação personalizadas .

    • 1

  2. Você não precisa usar nenhum pacote npm externo para fazer isso.

    export const getTimeDifference = (targetDate: string) => {
  const difference = new Date().getTime() - new Date(targetDate).getTime()

  if (difference > 0) {
    const timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    }
    return timeLeft
  }

  return undefined
}

    Você pode obter a diferença de fuso horário aqui.

    E

    const timeDiff = getTimeDifference(your Mongodb time string)
const timeString = `${timeDiff.days} days ${timeDiff.hours} hours ${timeDiff.minutes} minutes ${timeDiff.seconds} seconds`
    • 1

relate perguntas