Global configuration options of the components.
Configuration is managed by the PrimeReact instance imported from primereact/api.
import PrimeReact from 'primereact/api';
For components with an overlay like a dropdown, popups can be mounted either into the component or DOM element instance using this option. Valid values are any DOM Element like document body and self. By default all popups are append to document body via Portals.
PrimeReact.appendTo = 'self';
PrimeReact components utilize react-transition-group internally to implement animations. Setting cssTransition to false disables all animations.
PrimeReact.cssTransition = false;
Default filter modes to display on DataTable filter menus.
PrimeReact.filterMatchModeOptions = {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
};
Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-input-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to filled at PrimeReact configuration as well.
PrimeReact.inputStyle = 'filled';
The locale configuration sets up the language and region specific preferences. Visit the Locale APIfor more information.
The nonce value to use on dynamically generated style elements.
PrimeReact.nonce = '.........';
Determines how null values are sorted. The default value of 1 means sort like Excel with all NULL values at the bottom of the list. A value of -1 sorts NULL at the top of the list in ascending mode and at the bottom of the list in descending mode.
PrimeReact.nullSortOrder = 1;
Ripple is an optional animation for the supported components such as buttons. It is disabled by default.
PrimeReact.ripple = true;
ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeReact configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeReact.
The ZIndex of all components is increased according to their groups in harmony with each other. When autoZIndex is false, each group increments its zIndex within itself.
PrimeReact.zIndex = {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
toast: 1200 // toast
}
PrimeReact.autoZIndex = true;