How to change location/internationalization? (miss documentation)

[marianyfs]

@datepicker-react/hooks or @datepicker-react/styled version
e.g. @datepicker-react/hooks@1.0.0

Describe the bug (miss documentation)
I didn't find in the documentation how to change the component language.
As the example in the storyboard shows, there the component is translated from English to Spanish, but I couldn't understand how to do it. Is it a configuration file? Any component props? Which languages can you translate into?

Is the issue reproducible in Storybook?
https://react-datepicker.netlify.com/?path=/story/daterangeinput--localization

Additional context
I would like to change the component language to pt-BR

[tresko]

If you are using @datepicker-react/styled:

import {es as locale} from 'date-fns/locale'

function App({
  displayFormat = 'MM/DD/YYYY',
  showClose = true,
  showSelectedDates = true,
  showResetDates = false,
  vertical = false,
  rtl = false,
  exactMinBookingDays = false,
  minBookingDays = 1,
  numberOfMonths = 2,
  firstDayOfWeek = 1,
  phrasesProp = dateRangeInputPhrases,
  isDateBlocked = () => false,
  minBookingDate,
  maxBookingDate,
  dayLabelFormat = dayLabelFormatFn,
  weekdayLabelFormat = weekdayLabelFormatFn,
  monthLabelFormat = monthLabelFormatFn,
  onDayRender = undefined,
}: AppProps) {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateRangeInput
      minBookingDate={minBookingDate}
      maxBookingDate={maxBookingDate}
      // @ts-ignore
      onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      // @ts-ignore
      startDate={state.startDate}
      // @ts-ignore
      endDate={state.endDate}
      // @ts-ignore
      focusedInput={state.focusedInput}
      onClose={action('onClose')}
      displayFormat={displayFormat}
      vertical={vertical}
      rtl={rtl}
      showClose={showClose}
      showResetDates={showResetDates}
      showSelectedDates={showSelectedDates}
      exactMinBookingDays={exactMinBookingDays}
      minBookingDays={minBookingDays}
      numberOfMonths={numberOfMonths}
      firstDayOfWeek={firstDayOfWeek}
      phrases={phrasesProp}
      isDateBlocked={isDateBlocked}
      dayLabelFormat={dayLabelFormat}
      weekdayLabelFormat={weekdayLabelFormat}
      monthLabelFormat={monthLabelFormat}
      onDayRender={onDayRender}
    />
  )
}

<App
    rtl={boolean('rtl', false)}
    vertical={boolean('vertical', false)}
    exactMinBookingDays={boolean('exactMinBookingDays', false)}
    showResetDates={boolean('showResetDates', true)}
    showClose={boolean('showClose', true)}
    showSelectedDates={boolean('showSelectedDates', true)}
    displayFormat={text('displayFormat', 'MM/dd/yyyy')}
    firstDayOfWeek={0}
    phrasesProp={{
    datepickerStartDatePlaceholder: 'Seleccionar',
    datepickerStartDateLabel: 'Fecha de inicio:',
    datepickerEndDatePlaceholder: 'Seleccionar',
    datepickerEndDateLabel: 'Fecha de inicio:',
    resetDates: 'Deshacer',
    startDateAriaLabel: 'Fecha de inicio',
    endDateAriaLabel: 'Fecha de inicio',
    startDatePlaceholder: 'Fecha de inicio',
    endDatePlaceholder: 'Fecha de inicio',
    close: 'Cerca',
    }}
    dayLabelFormat={(date: Date) => format(date, 'dd', {locale})}
    weekdayLabelFormat={(date: Date) => format(date, 'eeeeee', {locale})}
    monthLabelFormat={(date: Date) => format(date, 'MMMM yyyy', {locale})}
/>