instatype

instatype

Komponen Autocomplete Bereaksi Mobile-Friendly

Demo

unsplash.now.sh (sumber)

Memasang

npm install instatype --save

Menyumbang

npm run example untuk menjalankan aplikasi contoh dengan pemuatan panas sumber instatype untuk pengembangan yang mudah.

Penggunaan

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

class Component extends React . Component {

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

Alat peraga

Menopang	Keterangan
placeholder	Teks placeholder untuk dimasukkan
limit	Jumlah hasil yang akan ditampilkan di dropdown
thumbStyle	Atur gambar hasil menjadi "lingkaran" atau "persegi"
loadingIcon	Jalur ke ikon pemuatan khusus
requestHandler	Fungsi yang diperlukan yang mengambil data, menambahkan "gambar" dan "nama" properti ke setiap objek dalam array respons, dan kemudian meneruskan data kembali ke komponen Instatype. Lihat Contoh Fungsi RequestHandler di bawah ini.
selectedHandler	Fungsi yang diperlukan yang dipanggil saat hasil dropdown diklik. Ini akan dilewatkan objek lengkap yang awalnya digunakan untuk mengisi yang menghasilkan dropdown.

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

}