👨🏼‍🔬 👩🏼‍💻 🛡️ 10 Komponen Bereaksi untuk Semua Acara 👨🏼 😼 🎛️

Saya percaya bahwa untuk menyelesaikan berbagai tugas pengembangan React, lebih baik menggunakan alat kecil yang sangat khusus, daripada solusi universal yang ditawarkan oleh perpustakaan komponen. Saya suka memilih komponen sendiri, saya tidak suka membaca dokumentasi panjang, dan saya ingin menghindari pembaruan perpustakaan yang tidak berarti, setelah itu sesuatu sering rusak dalam suatu proyek.

Perpustakaan front-end tertentu mampu memberikan pengembang desain komponen yang seragam, yang sangat penting. Tetapi mungkin ternyata proyek di mana ia direncanakan untuk menggunakan perpustakaan seperti itu sudah memiliki sistem desain sendiri, atau perpustakaan UI sendiri. Dalam situasi seperti itu, pengembang tidak mencari perpustakaan baru, tetapi hanya komponen khusus yang cocok untuk digunakan kembali dan mempercepat pekerjaan. Dalam kasus seperti itu, saya melihat lebih masuk akal dalam mencari komponen yang terpisah, daripada seluruh perpustakaan, yang berisi, pada saat yang sama, apa yang benar-benar dibutuhkan pengembang, banyak hal yang benar-benar tidak dia butuhkan.

Bahan, terjemahan yang kami terbitkan hari ini, didedikasikan untuk kisah 10 komponen React.

1. React Awesome Slider - "carousels"

Komponen React Awesome Slider memungkinkan Anda untuk membuat transisi yang mulus, indah, dan sangat dapat disesuaikan. Ini adalah komponen yang sangat kecil (7 Kb) yang didukung oleh semua browser utama. Ini adalah halaman demo React Awesome Slider.

2. Bereaksi Kotak Data - tabel

React Data Grid adalah komponen yang kuat, cepat dan mudah digunakan yang memungkinkan Anda untuk menampilkan sesuatu seperti lembar kerja Excel pada halaman. Dia tahu bagaimana memproses perintah keyboard, menyalin dan menempel data, dan, secara umum, berperilaku seperti spreadsheet yang biasanya berperilaku. Komponen ini menyediakan pengembang dengan API sederhana, yang dapat ditangani dengan sangat cepat. Lihat contoh penggunaannya di sini .

3. CogoToast - pemberitahuan

Menemukan komponen untuk mengimplementasikan pemberitahuan, mengingat banyaknya komponen yang ada, bukanlah tugas yang mudah. Ada banyak komponen yang sangat baik dari orientasi ini, tetapi di sini saya ingin berbicara tentang favorit saya, tentang CogoToast yang sederhana dan mudah dipahami . Paket komponen berukuran sederhana (4 Kb), memiliki API sederhana, dan penampilannya yang rapi sangat cocok untuk banyak proyek. Berikut adalah halaman GogoToast dengan contoh penggunaan komponen ini.

4. Google Maps React - maps

Google Maps React adalah komponen yang cukup populer yang mempercepat dan memfasilitasi penempatan (dengan koordinat) komponen Bereaksi lainnya di peta Google.

5. Bereaksi Tooltip - tooltips

React Tooltip adalah komponen implementasi tooltip yang mendukung banyak pengaturan. Cocok dengan desain antarmuka apa pun. Komponen ini memungkinkan Anda untuk melakukan apa pun yang Anda butuhkan dengan tooltips. Misalnya, mendukung acara khusus, penundaan, pembaruan interaktif untuk konten tooltip, dan banyak lagi.

6. React Block UI - memuat dan memblokir layar

React Block UI adalah komponen yang mudah digunakan yang mencegah pengguna berinteraksi dengan antarmuka halaman saat memuat apa pun.

7. Bereaksi Kartu Kredit - formulir untuk memasukkan data pembayaran

Saya tidak berencana memasukkan dalam ulasan ini sesuatu seperti "komponen terbaik untuk memasukkan data pembayaran", tetapi Bereaksi Kartu Kredit hanyalah komponen menarik yang tidak bisa saya bicarakan. Ini dapat disesuaikan, bekerja dengannya sederhana dan menyenangkan. Ini, antara lain, secara otomatis menentukan perusahaan yang sesuai dengan nomor kartu yang dimasukkan, dan kemudian menampilkan gambar kartu dengan logo yang sesuai.

8. React Markdown - rendering Markdown markup

React Markdown adalah solusi cepat dan mudah untuk rendering Markdown markup (termasuk HTML). Dia, seperti komponen lain dari ulasan ini, hanya dapat menyelesaikan satu masalah, tetapi dia melakukan pekerjaannya dengan sangat baik.

9. Coloreact - alat untuk memilih warna

Banyak perpustakaan UI menyediakan pengembang dengan alat mereka sendiri untuk memilih warna, tetapi Coloreact menggabungkan keseimbangan sempurna antara kemudahan penggunaan dan kustomisasi. Ini memungkinkan pengembang untuk menyesuaikan penampilan dan perilakunya, tanpa memerlukan banyak waktu untuk mempelajari mekanisme mereka sendiri.

10. Bereaksi Kalender Besar - Kalender

Jika Anda memerlukan komponen kalender yang dilengkapi dengan semua fitur yang ada di kalender "profesional" - ini berarti Anda harus melihat Bereaksi Kalender Besar . Ini memberi pengembang banyak peluang dan pengaturan - fungsi penjadwal, pelokalan, pemformatan tanggal dan waktu, dan banyak lagi.

Pembaca yang budiman! Komponen Bereaksi apa yang sangat terspesialisasi yang paling sering Anda gunakan?

10 Komponen Bereaksi untuk Semua Acara