instatype

Instape

移動友好的反應自動完成組件

演示

unsplash.now.sh（源）

安裝

npm install instatype --save

貢獻

npm run example可以使用Intype源的熱載加載來運行示例應用程序，以方便開發。

用法

 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	所需的函數，以獲取數據，將“圖像”和“名稱”屬性添加到響應數組中的每個對象，然後將數據傳遞回Interpype組件。請參閱下面的示例請求Handler函數。
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 ) ;
    }
  } ) ;

}