Configuration

The configuration component is used to provide a variety of useful overrides to your application. You can use the configuration component to wrap you entire application, or you can wrap individual components for specific use cases. The props passed to the configuration component that are detailed below may also be passed in as a configuration object to the context prop.

This documentation only covers a subset of the available props for the configuration component.

The locale prop accepts any valid BCP-47 language tag. This will control how certain components such as DateTimeInput render information that may be locale sensitive.

The portalTarget prop determines where to render certain components within the DOM tree. This will only affect components that are designed to render within a React Portal, such as Modals, Popovers, and Toasts.

By default, the portalTarget is set to body, so those components will appear as direct siblings to the <body/> tag when they are present in the DOM. You can supply any present DOM element to this prop and then components that renders within a React Portal will become a direct sibling to the specified element.

The styleSheetTarget prop is similar to the portalTarget prop in that it accepts a DOM element. However, this target is utilized by the Styled Components library. This target is referenced by the StyleSheetManager and any component styles will originate from the provided target.

By default, this target is set to html and thus covers the entirety of the DOM.

The theme prop accepts any JSON file or object that represents a subset of the Cosmos Theme. Every attribute within the Theme can be modified by replicating that attribute's heirachy and providing a custom value.

The translations prop accepts a JSON object of key-value pairs. This object can contain new keys as well as override the values of existing keys.

NameTypeDefaultDescription
children*ReactNodeAny components or nodes that should be impacted by the settings applied by this Configuration component.
contextContext<ConfigurationContextValue>Context to read previous configuration values from.
direction
'ltr' |'rtl' 
Override rendering direction of the document. Direction will be based on the locale if now provided.
disableDefaultFontLoadingbooleanDisables loading Open Sans from Google Fonts. Only takes effect on the root configuration.
localestringUser locale as defined in BCP-47.
overrideMap
{
  FileInput: ComponentType<FileInputProps>;
}
Override map to replace Cosmos components.
portalTargetElementTarget element for rendering a ReactDOM portal.
renderNativeControlsbooleanfalse Use native HTML5 controls for inputs instead of rich ones.
styleSheetTargetHTMLElementTarget element for loading styles related to styled-components.
themeDefaultSettableThemeTheme object used to override any or all Cosmos theme properties.
translationsTranslationObject with (partial) translations.