instatype

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	결과 이미지를 "Circle"또는 "Square"로 설정합니다.
loadingIcon	사용자 지정로드 아이콘으로가는 길
requestHandler	데이터를 가져오고 응답 배열의 각 객체에 "이미지"및 "이름"속성을 추가 한 다음 Instatype 구성 요소로 데이터를 전달하는 필수 기능이 있습니다. 아래의 예제 요청 핸들러 기능을 참조하십시오.
selectedHandler	드롭 다운 결과를 클릭 할 때 호출되는 필수 기능. 이것은 처음에 사용 된 전체 객체가 드롭 다운을 초래합니다.

예제 요청 핸들러

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

}