instatype

instatipo

Un componente React Autocompletado para dispositivos móviles

Manifestación

Unsplash.now.sh (fuente)

Instalar

npm install instatype --save

Contribuir

npm run example para ejecutar la aplicación Ejemplo con carga en caliente de la fuente de Instatype para un fácil desarrollo.

Uso

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

class Component extends React . Component {

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

Accesorios

Apuntalar	Descripción
placeholder	Texto del marcador de posición para la entrada
limit	Número de resultados para mostrar en el menú desplegable
thumbStyle	Establezca imágenes de resultados en "círculo" o "cuadrado"
loadingIcon	Ruta al icono de carga personalizada
requestHandler	Función requerida que obtiene datos, agrega propiedades de "imagen" y "nombre" a cada objeto en la matriz de respuesta, y luego vuelve a transmitir datos al componente Instatype. Vea un ejemplo de función de SolicHandler a continuación.
selectedHandler	Función requerida que se llama cuando se hace clic en un resultado desplegable. Esto se pasará por el objeto completo utilizado inicialmente para poblar ese resultado en el menú desplegable.

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

}