Configuration

Global configuration options of the components.

AppendTo#

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.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setAppendTo } = useContext(PrimeReactContext);

setAppendTo('self');

CSS Transition#

PrimeReact components utilize react-transition-group internally to implement animations. Setting cssTransition to false disables all animations.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setCSSTransition } = useContext(PrimeReactContext);

setCSSTransition(false);

Filter Mode#

Default filter modes to display on DataTable filter menus.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setFilterMatchMode } = useContext(PrimeReactContext);

setFilterMatchMode({
    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]
});

Hide Overlays on Viewport Change#

Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the overlay follow the scroll. Default value is false.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setHideOverlayOnScroll } = useContext(PrimeReactContext);

setHideOverlayOnScroll(true);

InputStyle#

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.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setInputStyle } = useContext(PrimeReactContext);

setInputStyle('filled');

Nonce#

The nonce value to use on dynamically generated style elements.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setNonce } = useContext(PrimeReactContext);

setNonce('.........');

Null Sort Order#

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.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setNullSortOrder } = useContext(PrimeReactContext);

setNullSortOrder(1);

Ripple#

Ripple is an optional animation for the supported components such as buttons. It is disabled by default.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setRipple } = useContext(PrimeReactContext);

setRipple(true);

ZIndex#

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 the context value.

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.


import { PrimeReactContext } from 'primereact/api';

//use in a component
const { setZIndex, autoZIndex } = useContext(PrimeReactContext);

setZIndex({
    modal: 1100,    // dialog, sidebar
    overlay: 1000,  // dropdown, overlaypanel
    menu: 1000,     // overlay menus
    tooltip: 1100   // tooltip
    toast: 1200     // toast
});

setAutoZIndex(true);