react instascanダウンロード - react instascanソースコードのダウンロード

react instascan

その他のソースコード

1.0.0

ダウンロード

リアクトインスタスキャン

Instascan ライブラリの React へのポート

警告

このライブラリは、依存関係ごとにinstascanの代わりにinstascan-umd使用しています。新しいバージョンにアップグレードする場合は、 istascan-umdインストールする必要があります。

インストール中

npm

npm install react-instascan react instascan-umd --save

糸

yarn add react-instascan react instascan-umd

unpkg CDN の使用

 < script type =" application/javascript " src =" https://unpkg.com/react-instascan/dist/main.js " > </ script >

要件

このライブラリを使用するには、少なくとも次のものが必要です。

反応 >= 16.3
instascan-umd >= 1

それを使用する

インポート中

React Instascan は、 CamerasとScanner の2 つのコンポーネントを公開します。
ESモジュールを使用する場合:

 import { Cameras , Scanner } from "react-instascan" ;

または CommonsJS を使用して:

 const { Cameras , Scanner } = require ( "react-instascan" ) ;

レンダリングプロップを備えた「カメラ」コンポーネントは、デバイス上で利用可能なカメラを取得します。
Scanner コンポーネントは、props としてカメラを受け取り、 VideoHTMLElement を子要素として受け取ります。次に、コードを読み取るときにonScanリスナーを呼び出します。他のイベントタイプも利用できます (API テーブルを確認してください)。

 < Cameras >
  { cameras => (
    < div >
      < h1 > Scan the code! < / h1 >
      < Scanner camera = { cameras [ 0 ] } onScan = { onScan } >
        < video style = { { width : 400 , height : 400 } } / >
      < / Scanner >
    < / div >
  ) }
< / Cameras >

スキャナーのプロパティ

名前	タイプ	説明
カメラ	物体	<Camera /> によって返されるカメラオブジェクト
オプション	物体	Instascan.Scanner と同じオプション
停止	ブール値	stop が true の場合、カメラは停止し、その逆も同様です。
オンスキャン	関数	連続モードでカメラを使用して QR コードをスキャンすると発行されます
onStart	関数	カメラがアクティブでスキャンが開始されたときに呼び出されます
オンストップ	関数	カメラとスキャンが停止したときに呼び出されます
オンアクティブ	関数	stop が false になるか、タブがフォーカスを取得した結果、スキャナーがアクティブになったときに発行されます。
on非アクティブ	関数	stop が true になったり、タブがフォーカスを失ったりした結果、スキャナーが非アクティブになったときに発行されます。