KendoReact AdaptiveModeContext Overview
The increasing variety of mobile devices requires an adaptive rendering for your application that covers all different screen resolutions and ensures a smooth user experience. You can customize the adaptive rendering of the KendoReact components by modifying the default adaptive breakpoints.
This is a Free React AdaptiveModeThe KendoReact AdaptiveMode is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.AdaptiveModeContext
The AdaptiveModeContext is a React context that provides a global configuration for adaptive rendering across various components. It lets you define breakpoints for small and medium screen sizes. This context is essential for implementing responsive layouts, where UI components such as DatePicker, DropDownList, ComboBox, and others may need to adapt.
The context itself provides small and medium breakpoints. You should wrap your components in a Provider to pass these values down the component tree:
small—Sets the horizontal screen width in pixels up to which the component will display as a full-screen modal. The default value is500.medium—Sets the horizontal screen width in pixels up to which the component will display as a docked-to-the-bottom modal. The default value is768.
The following example demonstrates how to customize the adaptive settings of the KendoReact DatePicker component.