コンデンサーリアクトフック

Capacitor 開発者がネイティブの Capacitor API を使用できるようにするためのフックのセット。

メンテナー

メンテナー	GitHub	社交
イーリー・ルーカス	エリルーカス	@elylucas

これらのドキュメントは Capacitor 3 プラグイン用です。 v2 プラグインを対象とするドキュメントについては、capv2 ブランチを参照してください。

はじめる

アプリで Capacitor Hook の使用を開始するには、使用する Capacitor プラグインとともに React Hook パッケージをインストールします。以下は、Storage プラグインと React フックの使用例です。

 # Install the Capacitor Plugin
npm install @capacitor/storage 
# And then the React hook package:
npm install @capacitor-community/storage-react

フックをインポートします。

 import { useStorage } from '@capacitor-community/storage-react'

次に、アプリでフックを使用します。

 const [ value , setValue ] = useStorage ( 'mykey' ) ;

特徴の検出

Capacitor を使用すると、複数のプラットフォームにわたって 1 つの API に書き込むことができますが、すべての機能がすべてのプラットフォームでサポートされているわけではありません。実行時エラーを避けるために、使用する予定の機能が使用可能かどうかを使用する前に確認することをお勧めします。

各フックプラグインパスは、そのプラグインのリスト機能を含むavailableFeaturesオブジェクトをエクスポートします。アプリが実行されている現在のプラットフォームで機能がサポートされている場合、その機能は true になります。

 const { useStorageItem , availableFeatures } = `@capacitor-community/storage-react` ;
const [ value , setValue ] = useStorage ( 'mykey' ) ;
...
if ( availableFeatures . useStorage ) {
  // Storage is available, feel free to use it!
  setValue ( 'cake' ) ;
}

Capacitor 2 React Hook からのアップグレード

Capacitor 3 では、すべてのプラグインが独自のパッケージに分離されました。同様に、新しい React フックプラグインも独自のパッケージに組み込まれているため、使用するプラグインごとにフックをインストールする必要があります。

Capacitor 2 から 3 までの非推奨の API も削除および更新されたため、API の変更に対応するためにいくつかの変更が必要になる場合があります。詳細については、「Capacitor Plugin API」を参照してください。

フックの使用法

@capacitor/アプリフック

インストール:

npm install @capacitor-community/app-react

使用法：

 import { useAppState , useAppUrlOpen , useLaunchUrl , availableFeatures } from '@capacitor-community/app-react' ;

useAppStateアプリがアクティブか非アクティブかなど、アプリのステータス情報へのアクセスを提供します。この値は動的に更新されます。

 const { state } = useAppState ( ) ;

`useLaunchUrl`

useLaunchUrlアプリが最初に起動された URL を提供します。今後の受信 URL イベントを追跡したい場合は、代わりに以下のuseAppUrlOpenを使用してください。

 const { launchUrl } = useLaunchUrl ( ) ;

`useAppUrlOpen`

useAppUrlOpenアプリをアクティブ化するために使用された最新の URL を提供します。たとえば、ユーザーが別のアプリのリンクをたどってアプリを開いた場合などです。

 const { appUrlOpen } = useAppUrlOpen ( ) ;

プラグイン API の詳細については、App Capacitor プラグインのドキュメントを参照してください。

@capcitor/ブラウザフック

インストール:

npm install @capacitor-community/browser-react

使用法：

 import { useClose , useOpen , availableFeatures } from '@capacitor-community/browser-react' ;

useOpen 、 useClose外部コンテンツ用のアプリ内ブラウザを起動および閉じる方法を提供します。

 // Open url in browser
const { open } = useOpen ( ) ;

open ( { url : 'http://ionicframework.com' } ) ;

// Close url in browser
const { close } = useClose ( ) ;
useClose ( ) ;

プラグイン API の詳細については、Browser Capacitor Plugin のドキュメントを参照してください。

@コンデンサ/カメラフック

インストール:

npm install @capacitor-community/camera-react

使用法：

 import { useCamera , availableFeatures } from '@capacitor-community/camera-react' ;

useCamera写真を撮る方法を提供します。

 const { photo , getPhoto } = useCamera ( ) ;
const triggerCamera = useCallback ( async ( ) => {
  getPhoto ( {
      quality : 100 ,
      allowEditing : false ,
      resultType : CameraResultType . DataUrl
    } )
} , [ getPhoto ] ) ;

< div > { photo && < img alt = "" src = { photo . dataUrl } / > } < / div >

プラグイン API の詳細については、Camera Capacitor Plugin のドキュメントを参照してください。

クリップボードフック

インストール:

npm install @capacitor-community/clipboard-react

使用法：

 import { useClipboard , availableFeatures } from '@capacitor-community/clipboard-react' ;

useClipboardクリップボードデータの読み取りと書き込みを行います。

 const { value , getValue , setValue } = useClipboard ( ) ;

const paste = useCallback ( async ( ) => {
  await setValue ( 'http://ionicframework.com/);
}, [setValue]);

const copy = useCallback(async () => {
  getValue(); 
}, [getValue])

プラグイン API の詳細については、クリップボードコンデンサプラグインのドキュメントを参照してください。

デバイスフック

インストール:

npm install @capacitor-community/device-react

使用法：

 import { useGetInfo , useGetLanguageCode , availableFeatures } from '@capacitor-community/device-react' ;

useGetInfo 、 useGetLanguageCodeデバイス情報とデバイス言語設定にアクセスできます。

 const { info } = useGetInfo ( ) ;
const { languageCode } = useGetLanguageCode ( ) ;

プラグイン API の詳細については、Device Capacitor Plugin のドキュメントを参照してください。

ファイルシステムフック

インストール:

npm install @capacitor-community/filesystem-react

使用法：

 import { useFilesystem , base64FromPath , availableFeatures } from '@capacitor-community/filesystem-react' ;

useFilesystemファイルシステム API にアクセスするための一般的なメソッドを返します。

 const { readFile } = useFilesystem ( ) ;

const file = await readFile ( {
  path : filepath ,
  directory : FilesystemDirectory . Data
} ) ;

base64FromPathは、ファイルへのパスを受け取り、そのファイルの Base64 エンコード表現を返すヘルパーメソッドです。

プラグイン API の詳細については、Filesystem Capacitor Plugin のドキュメントを参照してください。

 const base64String = await base64FromPath ( path ) ;

地理位置情報フック

インストール:

npm install @capacitor-community/geolocation-react

使用法：

 import { useCurrentPosition , useWatchPosition , availableFeatures } from '@capacitor-community/geolocation-react' ;

useCurrentPosition Capacitor の Geolocation API を使用して単一の地理位置情報を返します。 getPosition呼び出すことで、位置を手動で更新できます。

 const { currentPosition , getPosition } = useCurrentPosition ( ) ;

const handleRefreshPosition = ( ) => {
  getPosition ( ) ;
}

useWatchPosition Capacitor の Geolocation API のwatchPositionを使用して地理位置情報を追跡します。位置情報の更新が自動的に開始され、 clearWatchメソッドとstartWatchメソッドを使用して監視を手動で停止および再起動できます。

 const { currentPosition , startWatch , clearWatch } = useWatchPosition ( ) ;

プラグイン API の詳細については、Geolocation Capacitor Plugin のドキュメントを参照してください。

キーボードフック

インストール:

npm install @capacitor-community/keyboard-react

使用法：

 import { useKeyboardState } from '@capacitor-community/keyboard' ;

useKeyboardオンスクリーンキーボードが表示されるかどうかと、キーボードの高さの近似値 (ピクセル単位) を返します。

 const { isOpen , keyboardHeight } = useKeyboard ( ) ;
// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboard

プラグイン API の詳細については、キーボードコンデンサプラグインのドキュメントを参照してください。

ネットワークフック

インストール:

npm install @capacitor-community/network-react

使用法：

 import { useStatus , availableFeatures } from '@capacitor-community/network-react' ;

useStatusネットワークのステータスと情報を監視します。

 const { networkStatus } = useStatus ( ) ;

プラグイン API の詳細については、Network Capacitor Plugin のドキュメントを参照してください。

スクリーンリーダーフック

インストール:

npm install @capacitor-community/screen-reader-react

使用法：

 import { useIsScreenReaderEnabled , useSpeak , availableFeatures } from '@capacitor-community/screen-reader-react' ;

useIsScreenReaderEnabled有効になっている画面読み取りデバイスまたは OS 設定を検出して応答するためのアクセスを提供します。

 const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ;

useSpeak音声合成エンジン (利用可能な場合) をアクティブにして、音声テキストを読み上げます。

 const { speak } = useSpeak ( ) ;
speak ( { value : textToSpeak } )

プラグイン API の詳細については、ScreenReader Capacitor Plugin のドキュメントを参照してください。

収納フック

インストール:

npm install @capacitor-community/storage-react

使用法：

 import { useStorage , useStorageItem , availableFeatures } from '@capacitor-community/storage-react' ;

useStorage Capacitor のストレージエンジンへのアクセスを提供します。完全な Storage API にアクセスする必要がない場合、単一のアイテムの管理を簡単にするuseStorageItemと呼ばれるヘルパーもあります (下記を参照)。

 const { get , set , remove , getKeys , clear } = useStorage ( ) ;
useEffect ( ( ) => {
  async function example ( ) {
    const value = await get ( 'name' ) ;
    await set ( 'name' , 'Max' ) ;
    await remove ( 'name' ) ;
    const allKeys = await getKeys ( ) ;
    await clear ( ) ;
  }
} , [ get , set , remove , keys , clear ] ) ;

`useStorageItem`

useStorageItem 1 つの項目を追跡し、その項目を読み書きするための優れた方法を提供します。

 const [ name , setName ] = useStorageItem ( 'name' , 'Max' ) ;

// Example:
const updateName = useCallback ( ( n ) => {
  setName ( n ) ;
} , [ setName ] ) ;