Home Where do I put global day.js configuration in a React project so that it applies everywhere?

Questions

Where do I put global day.js configuration in a React project so that it applies everywhere?

February 15, 2024

I want to do the following day.js configuration:

import dayjs from 'dayjs';

// add plugins for timezone functionality
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);

// set default timezone
dayjs.tz.setDefault("America/New_York");

// set default format (source: https://stackoverflow.com/a/77459776/22134371)
dayjs.extend((option, dayjsClass, dayjsFactory) => {
    const oldFormat = dayjsClass.prototype.format;
    dayjsClass.prototype.format = function (formatString) {
        return oldFormat.bind(this)(formatString ?? 'YYYY-MM-DD')
    }
});

How do I define this only once in my React project, so that in every file that I use dayjs, it includes these configurations (timezone plugins, default timezone, and overriden format method)?

Thanks for any help!

>Solution :

You can just import it on the file that renders your app.

// src/lib/dayjsConfig.js

// all the config stuff you mentioned

// src/index.js

import './lib/dayjsConfig';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(<App />);