instatype

Инстатип

Компонент автозаполнения для мобильных устройств для мобильных устройств

Демо

unsplash.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	PATH to Custom загрузка значка
requestHandler	Требуемая функция, которая получает данные, добавляет свойства «изображение» и «имя» в каждый объект в массиве ответов, а затем передает данные обратно в компонент Instatype. См. Пример функции запроса handler ниже.
selectedHandler	Требуемая функция, которая вызывается, когда нажимается раскрывающийся результат. Это будет передано полный объект, который первоначально использовался для заполнения этого результата к выпадению.

Пример запроса handler

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

}