mediaQuery

Enables you to handle media queries in JavaScript using the MediaQueryList object. The method returns an object with the mediaQueryList field and the onChange, onEnter, onLeave, and destroy methods. The onChange, onEnter and onLeave methods accepts a callback function that will be executed when the media query is matched or not matched. The callback function will be passed a single argument - the MediaQueryListEvent instance and return the mediaQuery object that enables you to pipe more handlers.

The onChange method will be executed when the media query is matched or not matched. The onEnter method will be executed when the media query is matched and when the mediaQuery is initialized and media is matched. The onLeave method will be executed when the media query is not matched.

The destroy method will remove the event listeners and destroy the MediaQueryList instance. Note that developers should call the destroy method when the media query is no longer needed.

Parameters

media String

The media query that will create the MediaQueryList instance.

Example - Using a string

<script>
    const mediaQueryListener = kendo.mediaQuery('(max-width: 500px)')
                                .onEnter(() => {
                                    console.log('entered 500px width');
                                });
</script>

Example - Piping more handlers

<script>
    const mediaQueryListener = kendo.mediaQuery('(min-width: 500px) and (max-width: 1000px)')
                                .onChange(() => {
                                    console.log('changed screen width between 500px and 1000px');
                                })
                                .onEnter(() => {
                                    console.log('entered screen width between 500px and 1000px');
                                })
                                .onEnter(() => {
                                    // some other logic
                                })
                                .onLeave(() => {
                                    console.log('left screen width between 500px and 1000px');
                                });
</script>

Example - Destroying the media query listener

<script>
    const mediaQueryListener = kendo.mediaQuery('(min-width: 500px) and (max-width: 1000px)')
                                .onEnter(() => {
                                    console.log('entered screen width between 500px and 1000px');
                                });

    mediaQueryListener.destroy();
</script>

Returns

Object with the mediaQueryList field and the onChange, onEnter, onLeave and destroy methods.