Migrando do Moment.js para Day.js em Projetos React: Guia completo

Meu nome é Hudson, Co-fundador da Goyadevs.com e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo frontend, devops, linux e automatizações.

O React é uma biblioteca popular para construir interfaces de usuário em JavaScript. Ao desenvolver aplicativos React que lidam com datas e horas, muitos desenvolvedores recorrem ao Moment.js devido à sua rica funcionalidade e sintaxe intuitiva. No entanto, com a necessidade crescente de bibliotecas mais leves e modernas, como o Moment.js se tornou um pouco pesado, Day.js surge como uma alternativa atraente. Neste guia, vamos explorar como migrar de Moment.js para Day.js em projetos React, considerando diferentes tipos de migração.

1. Migração Básica: Substituição Direta

Nesta abordagem, você pode fazer uma substituição direta do Moment.js pelo Day.js, mantendo as funcionalidades básicas intactas. Por exemplo:

Moment.js (Formato de Data):

import moment from 'moment';

const formattedDate = moment().format('YYYY-MM-DD');

Day.js (Formato de Data):

import dayjs from 'dayjs';

const formattedDate = dayjs().format('YYYY-MM-DD');

2. Migração de Manipulação de Tempo Relativo

Se o seu aplicativo React faz uso intensivo de funções de tempo relativo do Moment.js, como fromNow(), você pode migrar para as funcionalidades equivalentes do Day.js. Por exemplo:

Moment.js (Tempo Relativo):

import moment from 'moment';

const relativeTime = moment('2023-01-01').fromNow(); // "2 anos atrás"

Day.js (Tempo Relativo):

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const relativeTime = dayjs('2023-01-01').fromNow(); // "2 anos atrás"

3. Migração de Formatação Humanizada

Se você estiver usando a função humanize() do Moment.js para formatar datas de uma forma humanizada, pode migrar para a funcionalidade equivalente do Day.js. Por exemplo:

Moment.js (Formatação Humanizada):

import moment from 'moment';

const humanizedTime = moment.duration(2, 'days').humanize(); // "2 days"

Day.js (Formatação Humanizada):

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';

dayjs.extend(duration);

const humanizedTime = dayjs.duration(2, 'days').humanize(); // "2 days"

4. Migração de Formato Personalizado

Se você estiver usando formatos personalizados complexos no Moment.js, pode migrar para o Day.js e ajustar os formatos conforme necessário. Por exemplo:

Moment.js (Formato Personalizado):

import moment from 'moment';

const customFormat = moment().format('MMMM Do YYYY, h:mm:ss a');

Day.js (Formato Personalizado):

import dayjs from 'dayjs';

const customFormat = dayjs().format('MMMM D YYYY, h:mm:ss a');

Conclusão

Migrar de Moment.js para Day.js em projetos React pode ser feito de várias maneiras, dependendo das funcionalidades específicas que você está usando. Ao considerar diferentes tipos de migração, você pode garantir uma transição suave e eficaz para o Day.js, mantendo a funcionalidade e a sintaxe do seu aplicativo React. Certifique-se de revisar a documentação oficial do Day.js para obter informações detalhadas sobre todas as funcionalidades mencionadas neste guia.

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim:

GitHub
LinkedIn
LeetCode