Global configuration options of the components.
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 appended to document body via Portals.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
appendTo: 'self',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
This option allows useStyle to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a Shadow DOM. By default all dynamic styles are appended to document.head.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
root.attachShadow({ mode: 'open' }); // Open the shadowRoot
const mountHere = root.shadowRoot;
const options = { appendTo: mountHere, styleContainer: mountHere};
ReactDOM.createRoot(mountHere).render(
<React.StrictMode>
<PrimeReactProvider value={options}>
<App />
</PrimeReactProvider>
</React.StrictMode>
);
PrimeReact components utilize react-transition-group internally to implement animations. Setting cssTransition to false disables all animations.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
cssTransition: false,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
Default filter modes to display on DataTable filter menus.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
filterMatchMode: {
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]
},
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
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. IMPORTANT: Your document.body must have overflow CSS on this to work properly.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
hideOverlaysOnDocumentScrolling: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
//_app.css
body {
margin: 0px;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
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.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
inputStyle: 'filled',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
The nonce value to use on dynamically generated style elements.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
nonce: '.........',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
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.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
nullSortOrder: 1,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
Ripple is an optional animation for the supported components such as buttons. It is disabled by default.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
ripple: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
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.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
zIndex: {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
toast: 1200 // toast
},
autoZIndex: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
To establish the default locale for your entire application, you can utilize the PrimeReactProvider.
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
locale: 'de',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
Configuration is managed by the Locale API imported from primereact/api.
import { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions } from 'primereact/api';
An available locale can be set with locale method at anytime.
locale('en');
New locale settings can be added using addLocale method.
addLocale('es', {
firstDayOfWeek: 1,
dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
today: 'Hoy',
clear: 'Limpiar',
//...
});
Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community.