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 ) ;
    }
  } ) ;

}