react haiku
v2.1.8
Haiku adalah perpustakaan bereaksi sederhana & ringan dengan tujuan menabung
Anda waktu dengan menawarkan koleksi besar kait & utilitas yang akan
membantu Anda menyelesaikan pekerjaan lebih cepat & lebih efisien!
Menginstal haiku sangat mudah!
Membutuhkan Bereaksi> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuProyek ini menggunakan Jest sebagai kerangka kerja pengujian dan React Testing Library (RTL) untuk menguji komponen dan kait bereaksi.
Untuk menjalankan semua tes unit dengan cakupan yang diaktifkan
npm run test Silakan periksa dokumentasi resmi untuk contoh penggunaan lengkap.
import { useHover } from 'react-haiku' ;
const Component = ( ) => {
const { hovered , ref } = useHover ( ) ;
return < p ref = { ref } > { hovered ? 'All mice on me' : 'No mice on me' } </ p > ;
} ;
export default Component ; import { For } from 'react-haiku' ;
const Component = ( ) => {
const list = [ { name : 'React' } , { name : 'Haiku' } ] ;
render (
< >
< For each = { list } render = { ( item , index ) => < p > { item . name } </ p > } />
</ > ,
) ;
} ;
export default Component ; Haiku selalu terbuka untuk perbaikan dan kontribusi, Anda dapat memeriksa masalah terbuka jika Anda ingin berkontribusi, dan juga dimungkinkan untuk meminta untuk menambahkan perbaikan/ide Anda sendiri menggunakan templat permintaan fitur. Sebelum berkontribusi, silakan baca panduan kontribusi dan pastikan untuk menghormati standar! Terima kasih atas waktu Anda!
useClipboard() - Salin data ke clipboard pengguna!useHover() - Cara cepat untuk mendeteksi jika mouse Anda melewati elemen!useInputValue() - Kelola status input dengan kait sederhana ini!useLeaveDetection() - Deteksi saat kursor pengguna Anda meninggalkan halaman!useMediaQuery() - Manipulasi komponen Anda menggunakan kueri media!useMousePosition() - Mendeteksi posisi mouse saat ini relatif terhadap target atau seluruh dokumen!usePrefersTheme() - Mendeteksi tema sistem yang disukai pengguna!useScript() - Lampirkan tag skrip ke dokumen dari komponen Anda!useToggle() - Sakelar nilai keadaan antara dua opsi berbeda!useBoolToggle() - Toggle Boolean State Values!useUrgentUpdate() - Force membuat komponen saat memanggil kait ini!useClickOutside() - Deteksi klik di luar elemen target!useConfirmExit() - Permintaan pengguna dengan pesan sebelum menutup tab jika status disetel sebagai kotor.useDebounce() - Debounce State perubahan untuk bereaksi terhadap pembaruan setelah penundaan!useEventListener() - Setel pendengar acara pada objek jendela atau elemen target tertentu!useFavicon() - Perbarui Favicon situs web secara dinamis dari komponen!useFirstRender() - Periksa apakah komponen ada di render pertama atau tidak!useHold() - Tangani penekanan panjang pada elemen target dan jalankan pawang setelah penundaan yang ditetapkan!useIdle() - Deteksi aktivitas pengguna/tidak aktif pada halaman berdasarkan acara!useIsomorphicLayoutEffect() - Beralih antara UseEffect dan UselayoutEffect tergantung pada lingkungan eksekusi (SSR vs browser)!useLocalStorage() - Kelola nilai LocalStorage secara dinamisuseScrollPosition() - Akses posisi gulir saat ini pada halaman dan memodifikasinya secara program.useSingleEffect() - Jalankan hook yang useEffect hanya sekali ketika komponen dipasang!useTitle() - Perbarui judul dokumen dari komponen Anda!useUpdateEffect() - Mirip dengan UsEeffect, tetapi melewatkan render pertama komponen, dan hanya bereaksi terhadap pembaruan yang dipicu oleh nilai ketergantungan.If - komponen untuk rendering bersyarat sederhana!Show - Komponen untuk rendering bersyarat yang kompleks!For - komponen rendering dinamis dengan penugasan kunci otomatis!RenderAfter - Komponen yang membuat anak -anaknya setelah penundaan yang ditetapkan.Image - Komponen yang menyederhanakan proses rendering gambar. David Haz
Mit
