instatype

Instatype

Um componente de preenchimento automático para dispositivos móveis

Demonstração

unsplash.now.sh (fonte)

Instalar

npm install instatype --save

Contribuir

npm run example para executar o aplicativo Exemplo com carregamento a quente da fonte do Instatype para facilitar o desenvolvimento.

Uso

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

class Component extends React . Component {

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

Adereços

Prop	Descrição
placeholder	Texto de espaço reservado para entrada
limit	Número de resultados a serem mostrados no suspensão
thumbStyle	Defina imagens de resultado como "círculo" ou "quadrado"
loadingIcon	Caminho para o ícone de carregamento personalizado
requestHandler	Função necessária que busca dados, adiciona propriedades de "imagem" e "nome" a cada objeto na matriz de resposta e depois passa os dados de volta ao componente Instatype. Veja um exemplo de função RequestHandler abaixo.
selectedHandler	A função necessária é chamada quando um resultado suspenso é clicado. Isso será passado o objeto completo usado inicialmente para preencher esse resultado no suspensão.

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

}