@wordpress/viewport

インストール

モジュールをインストールします

npm install @wordpress/viewport --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含めるべきです。

使用法

標準のブレークポイント閾値のセットは次のとおりです:

データモジュール

ビューポートモジュールは、core/viewportデータネームスペースの下に自らを登録し、パッケージからstoreとして公開されます。

import { select } from '@wordpress/data';
import { store } from '@wordpress/viewport';
const isSmall = select( store ).isViewportMatch( '< medium' );

``````bash
import { select } from '@wordpress/data';
import { store } from '@wordpress/viewport';
const { isViewportMatch } = select( store );
const isSmall = isViewportMatch( '< medium' );
const isWideOrHuge = isViewportMatch( '>= wide' );
// Equivalent:
//  const isWideOrHuge = isViewportMatch( 'wide' );
`

高階コンポーネント

このパッケージは、ビューポートに応じて動作が変わるコンポーネントを作成するためのHOCのセットを提供します。

ifViewportMatches

高階コンポーネントの作成者であり、ビューポートクエリが満たされる場合にレンダリングされる新しいコンポーネントを作成します。

関連

• withViewportMatches

使用法

function MyMobileComponent() {
   return <div>I'm only rendered on mobile viewports!</div>;
}
MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );

パラメータ

• クエリ string: ビューポートクエリ。

戻り値

• Function: 高階コンポーネント。

ストア

ビューポートネームスペースのストア定義。

関連

• https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore

タイプ

• Object

withViewportMatch

高階コンポーネントの作成者であり、与えられたプロップ名でレンダリングされる新しいコンポーネントを作成します。ここで、基盤となるコンポーネントに渡される値は、オブジェクトの値として割り当てられたクエリの結果です。

関連

• isViewportMatch

使用法

function MyComponent( { isMobile } ) {
   return <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>;
}
MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );

パラメータ

• クエリ Object: プロップ名からビューポートクエリへのオブジェクト。

戻り値

• Function: 高階コンポーネント。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。