instatype

Instatype

モバイルに優しいReact Autocompleteコンポーネント

デモ

unstplash.now.sh（ソース）

インストール

npm install instatype --save

貢献する

npm run example Instatypeソースのホットロードでサンプルアプリを実行して、簡単に開発します。

使用法

 import React from 'react' ;
import Instatype from 'instatype' ;

class Component extends React . Component {

  render ( ) {
    return < Instatype requestHandler = { myRequestHandler } selectedHandler = { mySelectedHandler } / > ;
  }
} 

小道具

小道具	説明
placeholder	入力用のプレースホルダーテキスト
limit	ドロップダウンで示す結果の数
thumbStyle	結果画像を「円」または「正方形」に設定します
loadingIcon	カスタムロードアイコンへのパス
requestHandler	データを取得し、応答配列内の各オブジェクトに「画像」と「名前」プロパティを追加し、Instatepeコンポーネントにデータを渡す必要のある関数。以下の例のリクエストハンドラー関数を参照してください。
selectedHandler	ドロップダウン結果がクリックされたときに呼び出される必要な関数。これは、最初にドロップダウンの結果をもたらすために最初に使用されていた完全なオブジェクトに渡されます。

requesthandlerの例

requestHandlerUsers: function ( query , limit , callback ) {

  $ . ajax ( {
    url : "https://api.instagram.com/v1/users/search" ,
    dataType : "jsonp" ,
    data : {
      client_id : this . props . instagramClientId ,
      q : query ,
      count : limit
    } ,
    success : function ( data ) {
      // Instatype expects an "image" and "name" for each result
      var renamedData = data . data . map ( function ( result ) {
        result . image = result . profile_picture ;
        result . name = result . username ;
        return result ;
      } ) ;
      
      callback ( renamedData ) ;
    }
  } ) ;

}