ビューポートデータ（The Viewport Data）

セレクタ

isViewportMatch

ビューポートが指定されたクエリに一致する場合はtrueを返し、それ以外の場合はfalseを返します。

使用法

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>
   );
};

パラメータ

• state Object: ビューポート状態オブジェクト。
• query string: クエリ文字列。演算子とブレークポイント名を含み、スペースで区切られています。演算子のデフォルトは “>=” です。

返り値

• boolean: ビューポートがクエリに一致するかどうか。

アクション

このパッケージのアクションは直接使用すべきではありません。

文書化することはありません。