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

Question

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!

Answer 1

You can create a new file in your project where you will set up and export the configured dayjs. Then name this file something like configuredDayjs.js (or .ts if you're using TypeScript).

configuredDayjs.js:

import dayjs from 'dayjs';

// Import plugins
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

// Extend dayjs with plugins
dayjs.extend(utc);
dayjs.extend(timezone);

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

// Override the format method to set a default format
dayjs.extend((option, dayjsClass, dayjsFactory) => {
  const oldFormat = dayjsClass.prototype.format;
  dayjsClass.prototype.format = function (formatString) {
    return oldFormat.bind(this)(formatString ?? 'YYYY-MM-DD');
  }
});

// Export the configured dayjs
export default dayjs;

Whenever you need to use dayjs in your project, import it from your custom module instead of directly from the dayjs package.

For example, in a React component:

import React from 'react';
import dayjs from './configuredDayjs'; // Import dayjs from your custom module

const MyComponent = () => {
  const now = dayjs(); // This uses your configured version of dayjs
  return <div>The current time is: {now.format()}</div>; // Uses the overridden format method
};

export default MyComponent;

Answer 2

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 />);