react hooks

Kait Reaksi Kapasitor

Seperangkat kait untuk membantu pengembang Capacitor menggunakan API Capacitor asli.

Pemelihara

Pemelihara	GitHub	Sosial
Eli Lucas	elylucas	@elylucas

Dokumen ini untuk plugin Capacitor 3. Untuk dokumen yang menargetkan plugin v2, lihat cabang capv2.

Memulai

Untuk mulai menggunakan Capacitor Hooks di aplikasi Anda, instal paket React Hook bersama dengan plugin Capacitor yang ingin Anda gunakan. Berikut adalah contoh penggunaan plugin Storage beserta React hook-nya:

 # Install the Capacitor Plugin
npm install @capacitor/storage 
# And then the React hook package:
npm install @capacitor-community/storage-react

Impor kait:

 import { useStorage } from '@capacitor-community/storage-react'

Kemudian gunakan kait di aplikasi Anda:

 const [ value , setValue ] = useStorage ( 'mykey' ) ; 

Deteksi Fitur

Meskipun Capacitor memungkinkan Anda menulis ke satu API di beberapa platform, tidak semua fitur didukung di semua platform. Disarankan untuk memeriksa apakah fitur yang ingin Anda gunakan tersedia sebelum menggunakannya untuk menghindari kesalahan runtime.

Masing-masing jalur plugin hook mengekspor objek availableFeatures , yang berisi daftar fitur untuk plugin tersebut. Jika fitur tersebut didukung untuk platform saat ini yang menjalankan aplikasi, fitur tersebut akan berlaku:

 const { useStorageItem , availableFeatures } = `@capacitor-community/storage-react` ;
const [ value , setValue ] = useStorage ( 'mykey' ) ;
...
if ( availableFeatures . useStorage ) {
  // Storage is available, feel free to use it!
  setValue ( 'cake' ) ;
}

Mengupgrade dari Capacitor 2 React Hooks

Di Capacitor 3, semua plugin dipisahkan ke dalam paketnya masing-masing. Demikian pula, plugin React hooks yang baru juga dimasukkan ke dalam paketnya sendiri, jadi Anda perlu menginstal hook untuk setiap plugin yang Anda gunakan.

API apa pun yang tidak digunakan lagi dari Kapasitor 2 hingga 3 juga telah dihapus dan diperbarui, jadi Anda mungkin perlu melakukan beberapa modifikasi untuk memperhitungkan perubahan API. Lihat API Plugin Kapasitor untuk mempelajari lebih lanjut.

Penggunaan Kait

@capacitor/app Kait

Instalasi:

npm install @capacitor-community/app-react

Penggunaan:

 import { useAppState , useAppUrlOpen , useLaunchUrl , availableFeatures } from '@capacitor-community/app-react' ;

useAppState memberikan akses ke informasi status Aplikasi, seperti apakah aplikasi aktif atau tidak aktif. Nilai ini akan diperbarui secara dinamis.

 const { state } = useAppState ( ) ; 

useLaunchUrl

useLaunchUrl menyediakan URL tempat aplikasi pertama kali diluncurkan. Jika Anda ingin melacak peristiwa URL masuk di masa mendatang, gunakan useAppUrlOpen di bawah ini.

 const { launchUrl } = useLaunchUrl ( ) ; 

useAppUrlOpen

useAppUrlOpen menyediakan URL terbaru yang digunakan untuk mengaktifkan aplikasi. Misalnya, jika pengguna mengikuti link di aplikasi lain yang membuka aplikasi Anda.

 const { appUrlOpen } = useAppUrlOpen ( ) ;

Lihat dokumen Plugin Kapasitor Aplikasi untuk informasi selengkapnya tentang API plugin.

@capcitor/browser Kait

Instalasi:

npm install @capacitor-community/browser-react

Penggunaan:

 import { useClose , useOpen , availableFeatures } from '@capacitor-community/browser-react' ;

useOpen , useClose menyediakan cara untuk meluncurkan, dan menutup browser dalam aplikasi untuk konten eksternal:

 // Open url in browser
const { open } = useOpen ( ) ;

open ( { url : 'http://ionicframework.com' } ) ;

// Close url in browser
const { close } = useClose ( ) ;
useClose ( ) ;

Lihat dokumen Plugin Kapasitor Browser untuk info lebih lanjut tentang API plugin.

@capacitor/kait kamera

Instalasi:

npm install @capacitor-community/camera-react

Penggunaan:

 import { useCamera , availableFeatures } from '@capacitor-community/camera-react' ;

useCamera menyediakan cara untuk mengambil foto:

 const { photo , getPhoto } = useCamera ( ) ;
const triggerCamera = useCallback ( async ( ) => {
  getPhoto ( {
      quality : 100 ,
      allowEditing : false ,
      resultType : CameraResultType . DataUrl
    } )
} , [ getPhoto ] ) ;

< div > { photo && < img alt = "" src = { photo . dataUrl } / > } < / div >

Lihat dokumen Plugin Kapasitor Kamera untuk informasi lebih lanjut tentang API plugin.

Kait Papan Klip

Instalasi:

npm install @capacitor-community/clipboard-react

Penggunaan:

 import { useClipboard , availableFeatures } from '@capacitor-community/clipboard-react' ;

useClipboard membaca dan menulis data clipboard:

 const { value , getValue , setValue } = useClipboard ( ) ;

const paste = useCallback ( async ( ) => {
  await setValue ( 'http://ionicframework.com/);
}, [setValue]);

const copy = useCallback(async () => {
  getValue(); 
}, [getValue])

Lihat dokumen Plugin Kapasitor Clipboard untuk informasi lebih lanjut tentang API plugin.

Kait Perangkat

Instalasi:

npm install @capacitor-community/device-react

Penggunaan:

 import { useGetInfo , useGetLanguageCode , availableFeatures } from '@capacitor-community/device-react' ;

useGetInfo , useGetLanguageCode memberikan akses ke informasi perangkat dan pengaturan bahasa perangkat:

 const { info } = useGetInfo ( ) ;
const { languageCode } = useGetLanguageCode ( ) ;

Lihat dokumen Plugin Kapasitor Perangkat untuk informasi lebih lanjut tentang API plugin.

Kait Sistem File

Instalasi:

npm install @capacitor-community/filesystem-react

Penggunaan:

 import { useFilesystem , base64FromPath , availableFeatures } from '@capacitor-community/filesystem-react' ;

useFilesystem mengembalikan metode umum untuk mendapatkan akses ke api sistem file.

 const { readFile } = useFilesystem ( ) ;

const file = await readFile ( {
  path : filepath ,
  directory : FilesystemDirectory . Data
} ) ;

base64FromPath adalah metode pembantu yang akan mengambil jalur ke file dan mengembalikan representasi file tersebut yang dikodekan base64.

Lihat dokumen Plugin Capacitor Filesystem untuk informasi lebih lanjut tentang API plugin.

 const base64String = await base64FromPath ( path ) ; 

Kait Geolokasi

Instalasi:

npm install @capacitor-community/geolocation-react

Penggunaan:

 import { useCurrentPosition , useWatchPosition , availableFeatures } from '@capacitor-community/geolocation-react' ;

useCurrentPosition mengembalikan satu posisi geolokasi menggunakan API Geolokasi di Capacitor. Posisi dapat diperbarui secara manual dengan memanggil getPosition :

 const { currentPosition , getPosition } = useCurrentPosition ( ) ;

const handleRefreshPosition = ( ) => {
  getPosition ( ) ;
}

useWatchPosition melacak posisi geolokasi menggunakan watchPosition di API Geolokasi di Capacitor. Lokasi akan mulai diperbarui secara otomatis, dan Anda dapat menggunakan metode clearWatch dan startWatch untuk menghentikan dan memulai ulang jam tangan secara manual.

 const { currentPosition , startWatch , clearWatch } = useWatchPosition ( ) ;

Lihat dokumen Plugin Kapasitor Geolokasi untuk informasi lebih lanjut tentang API plugin.

Kait Keyboard

Instalasi:

npm install @capacitor-community/keyboard-react

Penggunaan:

 import { useKeyboardState } from '@capacitor-community/keyboard' ;

useKeyboard mengembalikan apakah keyboard di layar ditampilkan atau tidak serta perkiraan tinggi keyboard dalam piksel.

 const { isOpen , keyboardHeight } = useKeyboard ( ) ;
// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboard

Lihat dokumen Plugin Kapasitor Keyboard untuk informasi lebih lanjut tentang API plugin.

Kait Jaringan

Instalasi:

npm install @capacitor-community/network-react

Penggunaan:

 import { useStatus , availableFeatures } from '@capacitor-community/network-react' ;

useStatus memonitor status dan informasi jaringan:

 const { networkStatus } = useStatus ( ) ;

Lihat dokumen Plugin Kapasitor Jaringan untuk informasi lebih lanjut tentang API plugin.

Kait Pembaca Layar

Instalasi:

npm install @capacitor-community/screen-reader-react

Penggunaan:

 import { useIsScreenReaderEnabled , useSpeak , availableFeatures } from '@capacitor-community/screen-reader-react' ;

useIsScreenReaderEnabled memberikan akses untuk mendeteksi dan merespons perangkat pembaca layar atau pengaturan OS yang diaktifkan:

 const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ;

useSpeak mengaktifkan mesin text-to-speech (jika tersedia) untuk membaca teks lisan.

 const { speak } = useSpeak ( ) ;
speak ( { value : textToSpeak } )

Lihat dokumen Plugin Kapasitor ScreenReader untuk informasi lebih lanjut tentang API plugin.

Kait Penyimpanan

Instalasi:

npm install @capacitor-community/storage-react

Penggunaan:

 import { useStorage , useStorageItem , availableFeatures } from '@capacitor-community/storage-react' ;

useStorage menyediakan akses ke mesin penyimpanan Capacitor. Ada juga pembantu bernama useStorageItem yang memudahkan pengelolaan satu item jika Anda tidak perlu mengakses API Penyimpanan lengkap (lihat di bawah)

 const { get , set , remove , getKeys , clear } = useStorage ( ) ;
useEffect ( ( ) => {
  async function example ( ) {
    const value = await get ( 'name' ) ;
    await set ( 'name' , 'Max' ) ;
    await remove ( 'name' ) ;
    const allKeys = await getKeys ( ) ;
    await clear ( ) ;
  }
} , [ get , set , remove , keys , clear ] ) ; 

useStorageItem

useStorageItem melacak satu item dan menyediakan cara yang bagus untuk membaca dan menulis item tersebut:

 const [ name , setName ] = useStorageItem ( 'name' , 'Max' ) ;

// Example:
const updateName = useCallback ( ( n ) => {
  setName ( n ) ;
} , [ setName ] ) ;

useStorageItem akan menggunakan nilai awal yang sudah ada di penyimpanan, atau nilai yang disediakan jika tidak ada nilai.

Lihat dokumen Plugin Kapasitor Penyimpanan untuk informasi lebih lanjut tentang API plugin.

Kait Lainnya

Ini adalah proyek yang terus berkembang dan belum semua Plugin Kapasitor didukung. Jika ada yang Anda perlukan, silakan buka terbitannya, atau lebih baik lagi, kirimkan PR!