Providing your own internationalized content

The design system attempts to make all of its components' text content assignable through their React props. That means you can use your own internationalization solutions to provide the content in your applications. Here is an example:

// Example of an application providing its own internationalized content

import { Alert } from '@cmsgov/design-system';
import i18n from 'i18n';

export default function () {
  return <Alert heading={i18n('success')}>{i18n('account.created')}</Alert>;
}

Default internationalized content in the design system

While we want components to be flexible, we also want them to be easy to use, so for some components we do provide default content. Some of this content comes in both English and Spanish, but our goal is to have Spanish translations for all default content in the near future.

For applications that have a lang attribute on their html element, the language will be detected automatically. If that language is not English or Spanish, the language of the design system will fall back to English. If automatic language detection does not work for your use case, the language can be set manually through the setLanguage function. Similarly, the current language can also be read from the getLanguage function. Here's an example:

import { getLanguage, setLanguage } from '@cmsgov/design-system';

// Set the design system language to something other than the document's detected language
setLanguage('es');

// Get the design system's current language
console.log(getLanguage());