Localization globally setup

[joaopedrodcf]

I was reading the docs to understand how can I setup all the global usages of react-day-picker to use the correct language and seems like we every time need to import date-fns and pass it to each instance of it: https://react-day-picker.js.org/basics/localization#changing-locale as can be read on that link.

Is it possible to have an API where we setup globally the locale similar to the setDefaultOptions where we can setup this everywhere ?

https://date-fns.org/v2.30.0/docs/setDefaultOptions

[gpbl]

Hi @joaopedrodcf, I didn't know about that setDefaultOptions in date-fns. It doesn't seem to have effect to DayPicker: https://codesandbox.io/s/polished-bash-4sp2p6?file=/src/App.tsx

As alternative you can import a wrapper where you set these props once for all:

// ./example/DayPickerEs.tsx

import {
  DayPicker as DayPickerDefault,
  DayPickerProps
} from "react-day-picker";

/** Render DayPicker with Spanish locale */
export function DayPicker(props: Omit<DayPickerProps, "locale">) {
  return <DayPickerDefault {...props} locale={es} />;
}

Then in your app you import from DayPickerEs.tsx to get a DayPicker with the same locale:

import { DayPicker } from './DayPickerEs.tsx';

Would this solution work for you?

[joaopedrodcf]

Hey @gpbl thanks for the reply!

I actually managed to centralize it doing similar to what you have above plus also loading the local async with await import in a custom hook, this way its centralised the logic and also we don't load all the locales without the user interaction.

Thanks for the help 👍

[gpbl]

Async-importing the locales is neat! Well done! Happy it worked for you.