使用法

標準の iframe のように使用します。iframe がフォーカスを受け取ったときに呼び出されるコールバックとして onFocus を直接渡すことができます。また、イベントはバブルするため、祖先コンポーネントに渡すことも可能です。 

  1. import { FocusableIframe } from '@wordpress/components';
  3. const MyFocusableIframe = () => (
  4.    <FocusableIframe
  5.    src="/my-iframe-url"
  6.    onFocus={ () => console.log( 'iframe is focused' ) }
  7.    />
  8. );

プロパティ

以下に示すプロパティ以外のすべてのプロパティは、FocusableIframe に渡され、基礎となる iframe 要素に渡されます。

onFocus

  • タイプ: Function
  • 必須: いいえ

iframe がフォーカスを受け取ったときに呼び出されるコールバックです。最初の引数としてエミュレートされた FocusEvent オブジェクトを渡します。

iframeRef

  • タイプ: React.Ref
  • 必須: いいえ

基礎となる DOM 要素への参照が必要な場合は、コンポーネントから呼び出された React.createRef の結果として iframeRef を渡します。