Skip Navigation
React Magma

Internationalization

React Magma exposes an I18nContext object and an object named defaultI18n that contains the default values used by the context provider.

Usage

You can supply your own object or override specific keys in the object to provide translations for strings in the components.

There are some values in the context that are used to localize date and time. These are locale, dateFormat, timeFormat, and datePicker.startOfWeek. These keys have specific types listed below, while the rest are strings:

  • locale is a date-fns locale object. You can see the available objects here. Example of a locale import: import { es } from 'date-fns/locale'.

    The locale in the default object is null to prevent the date-fns library from being bundled in your project when you are not using any of its functionality. When you use a component that depends on the date-fns library, React Magma will default your locale to enUS.

  • dateFormat is a list of acceptable date formats as strings: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy/MM/dd' | 'yyyy/dd/MM'.

  • timeFormat is either the string '12' or '24'.

  • datePicker.startOfWeek is the string of the day of the week that you want your week to start on: 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday'

Default Context Object

Example Usage

import React from 'react';


import { DatePicker, I18nContext, defaultI18n, es } from 'react-magma-dom';


export function Example() {
  return (
    <I18nContext.Provider
      value={{
        ...defaultI18n,
        days: {
          ...defaultI18n.days,
          min: {
            sunday: 'D',
            monday: 'L',
            tuesday: 'M',
            wednesday: 'M',
            thursday: 'J',
            friday: 'V',
            saturday: 'S',
          },
        },
        datePicker: {
          startOfWeek: 'monday',
          calendarIconAriaLabel: 'Calendario',
          calendarOpenAnnounce:
            'El widget de calendario ahora está abierto. Presione la tecla de signo de interrogación para obtener los atajos de teclado para cambiar las fechas.',
          calendarCloseAriaLabel: 'Cerrar calendario',
          previousMonthAriaLabel: 'Mes Anterior',
          nextMonthAriaLabel: 'Próximo Mes',
          disabledDayAriaLabel: 'No disponible. ',
          selectedDayAriaLabel: '(Seleccionado)',
          helpModal: {
            header: 'Atajos de teclado',
            helpButtonAriaLabel: 'Ayuda de calendario',
            enter: {
              ariaLabel: 'Introducir clave',
              explanation: 'Seleccione la fecha en foco.',
            },
            rightAndLeftArrowKeys: {
              ariaLabel: 'Teclas de flecha derecha e izquierda',
              explanation:
                'Muévase hacia atrás (izquierda) y hacia adelante (derecha) un día.',
            },
            upAndDownArrowKeys: {
              ariaLabel: 'teclas de flecha arriba y abajo',
              explanation:
                'Muévase hacia atrás (arriba) y hacia adelante (abajo) una semana.',
            },
            pageUpAndPageDownKeys: {
              ariaLabel: 'teclas de página arriba y página abajo',
              displayValue: 'PGAR/PGAB',
              explanation: 'Cambiar de mes.',
            },
            homeAndEndKeys: {
              ariaLabel: 'Teclas de inicio y fin',
              displayValue: 'CASA/FINAL',
              explanation: 'Ir al primer o último día de una semana.',
            },
            escape: {
              ariaLabel: 'Tecla de escape',
              displayValue: 'ESCAPAR',
              explanation: 'Regresar al campo de entrada de fecha.',
            },
          },
        },
        locale: es,
      }}
    >
      <DatePicker labelText="Español" />
    </I18nContext.Provider>
  );
}

On this page

Deploys by Netlify