instatype

Instatyp

Eine mobilfreundliche Reaktions-Autoperetekomponente

Demo

Unsplash.now.sh (Quelle)

Installieren

npm install instatype --save

Beitragen

npm run example für die Beispiel -App mit heißem Laden der Instatype -Quelle für eine einfache Entwicklung.

Verwendung

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

class Component extends React . Component {

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

Requisiten

Stütze	Beschreibung
placeholder	Platzhaltertext für die Eingabe
limit	Anzahl der Ergebnisse, die im Dropdown angezeigt werden sollen
thumbStyle	Setzen Sie Ergebnisbilder auf "Kreis" oder "Quadrat"
loadingIcon	Pfad zum benutzerdefinierten Lade -Symbol
requestHandler	Erforderliche Funktion, die Daten abreißt, jedem Objekt im Antwortarray "Bild" und "Name" zu den Eigenschaften hinzufügt und dann Daten an die Instatyp -Komponente zurückgibt. Siehe eine Beispiel -RequestHandler -Funktion unten.
selectedHandler	Erforderliche Funktion, die aufgerufen wird, wenn ein Dropdown -Ergebnis geklickt wird. Dies wird übergeben, das vollständige Objekt, das ursprünglich verwendet wird, um zu füllen, die zum Dropdown -Bereich führen.

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

}