How to use dynamic locales coming from the backend?

[martinszeltins]

My locale is coming from the backend and I do not know what it will be in advance. So I cannot statically import a specific locale from date-fns and I don't want to import them all either. Is there a workaround for this?

For example, from the backend server I receive this locale as string

let locale = await settingsApi.getSettings()
let locale = 'en' // <-- I don't know what locale backend will give me here

How can I now use this locale variable for date-fns?

import { formatWithOptions } from 'date-fns/fp'

// Well, I can't import en because I don't know the locale in advance
import { en } from 'date-fns/locale'

function formatDate(date) {
  return formatWithOptions({ locale: en }, 'D MMMM YYYY')
}

[Jules010209]

Hello, how that's can be returned? I speak about you're locales from your API. Do you have a list of all the possibilities?
In fact, if the variables return the same variable name as date-fns, you can easily adapt them to your code.

[joaopedrodcf]

You can dynamic import the locale something like this ( v2 ):

import { setDefaultOptions } from 'date-fns';
...

export const loadDateFnsLocale = async (locale: Locale) => {
    return await import(
        `date-fns/locale/${localeToDateFnsLocale[locale]}/index.js`
    );
};

export const useDateFnsLocale = () => {
   const {data} = loadDateFnsLocale('en-US'); // Example

    if (data) {
        setDefaultOptions({ locale: data.default });
    }

   ...
};