Lima React Package yang Wajib Dicoba

Hi, Coders! kali ini penulis akan membagikan 5 packages di React yang pastinya berguna banget buat pengembangan aplikasi. Langsung aja yuk kita bahas.

1. React Loader Spinner

Semua orang tidak suka menunggu bukan? Yap, betul sekali. Menunggu itu membosankan atau user bisa mengira jika web Anda tidak merespon. User masa sekarang mengharapkan situs web yang cepat sebagai hal yang biasa. Jika aplikasi kalian berat atau lambat, tampilkan salah satu animasi loading modern ini saat konten Anda dimuat. Selain meningkatkan estetika aplikasi Anda, ini juga akan membantu mempertahankan user agar tidak langsung menutup laman web.

Untuk menggunakannya Anda bisa langsung menginstalnya menggunakan npm atau yarn :

npm i react-loader-spinner
// atau
yarn add react-loader-spinner

Sekarang import statement yang dibutuhkan :

import  Loader  from  'react-loader-spinner'

dan tambahkan ke dalam project Anda :

<Loader
  type="Puff"
  color="#00BFFF"
  height={100}
  width={100}
  timeout={3000} //3 secs
/>

Untuk dokumentasi lengkapnya bisa melihatnya disini

2. React Animated Burgers

Package ini berfungsi untuk menambahkan ikon menu animasi ke bagian navigasi, juga menampilkan segudang ikon dan animasi. Sangat mudah untuk menyesuaikan dan menambahkannya pada proyek Anda.

Seperti semua npm/yarn package, tentu saja package ini bisa diinstal dengan sangat mudah dengan hanya memasukan satu baris perintah sepeti berikut :

npm i react-animated-burgers
// atau
yarn add react-animated-burgers styled-components

Untuk menambahkannya ke project Anda, cukup pilih satu icon yang diinginkan dan import ke dalam project seperti berikut :

import  {  HamburgerSpin  }  from  'react-animated-burgers'

Lalu Anda bisa dengan mudah menambahkannya ke header atau navabar seperti berikut :

<HamburgerSpin
  buttonColor="red" //optional
  barColor="#F5F5F5" //optional
  {...{ isActive, toggleButton }}
/>

Untuk dokumentasi lengkapnya dapat mengunjungi situs resminya disini.

3. React Responsive Carousel

Banyak situs web memiliki carousel di situsnya, baik untuk menampilkan produk, anggota tim, atau informasi umum tentang perusahaan. Jika Anda tertarik untuk menambahkan karosel ke situs, Anda mungkin menemukan banyak package yang 'setengah matang' atau di bawah standar. Tidak seperti yang lain, package ini powerfull, ringan, dan dapat disesuaikan sepenuhnya sesuai kebutuhan.

Untuk menginstalnya :

npm i react-responsive-carousel
//atau
yarn add react-responsive-carousel

Untuk menambahkannya ke project Anda, tambahkan statement import berikut :

mport { Carousel } from 'react-responsive-carousel'
import "react-responsive-carousel/lib/styles/carousel.min.css";

Kemudian Anda bisa menggunakanya di website Anda :

<Carousel>
  <div>
    <img src="assets/1.jpeg" />
    <p className="legend">Legend 1</p>
  </div>
  <div>
    <img src="assets/2.jpeg" />
    <p className="legend">Legend 2</p>
  </div>
  <div>
    <img src="assets/3.jpeg" />
    <p className="legend">Legend 3</p>
  </div>
</Carousel>

Untuk contoh dan dokumentasi lengkapnya dapat mengunjungi situs resminya disini.

4. React CountUp

Menampilkan statistik perusahaan di situs web Anda tidak pernah semudah ini. Package ini memungkinkan Anda untuk membuat animasi count up yang sangat menarik ketimbang hanya menampilkan teks biasa saja.

Instalasi package :

npm i react-countup
// atau
yarn add react-countup

Untuk menambahkannya ke project Anda, tambahkan statement berikut ke bagian atas file project Anda:

import CountUp from 'react-countup';

Berikut tiga contoh penggunaan sederhana:

<CountUp end={100} />
<CountUp delay={2} end={100} />
<CountUp duration={5} end={100} />

Informasi lebih lanjut mengenai package ini bisa Anda temukan disini.

5. React Markdown

Jika Anda penggemar efisiensi dan kesederhanaan yang disediakan oleh bahasa Markdown, Anda akan senang mengetahui bahwa ada cara mudah untuk menggunakan Markdown dalam kode React Anda. Ya, cukup gunakan saja package ini!

Instal menggunakan npm:

npm  i  react-markdown

Tambahkan statement yang dibutuhkan pada file project Anda :

const ReactMarkdown = require('react-markdown')

dan sekarang Anda dapat langsung menggunakkannya!

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')
const input = '# This is a header\n\nAnd this is a paragraph'
ReactDOM.render(<ReactMarkdown source={input} />, document.getElementById('container'))

Untuk dokumentasi dan informasi lebih lanjut dapat dilihat disini.

Cukup menarik bukan? Untuk Anda yang sedang kebingungan mempelajari React, tenang saja, di Codepolitan ada kelas Belajar Cepat Membuat Web App Berbasis React dan juga kelas Membuat Web Kuliner Menggunakan React.js yang dapat membantu Anda mempelajari React dengan cepat dan terarah. Tunggu apa lagi langsung saja mendaftar!

Semoga bermanfaat. Happy coding :)

Sumber : Medium