The Viewport Data

Namespace: core/viewport.

Selectors

isViewportMatch

Returns true if the viewport matches the given query, or false otherwise.

Usage

import { store as viewportStore } from '@wordpress/viewport';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
const ExampleComponent = () => {
    const isMobile = useSelect(
        ( select ) => select( viewportStore ).isViewportMatch( '< small' ),
        []
    );

    return isMobile ? (
        <div>{ __( 'Mobile' ) }</div>
    ) : (
        <div>{ __( 'Not Mobile' ) }</div>
    );
};

Parameters

• state Object: Viewport state object.
• query string: Query string. Includes operator and breakpoint name, space separated. Operator defaults to >=.

Returns

• boolean: Whether viewport matches query.

Actions

The actions in this package shouldn’t be used directly.

Nothing to document.