Cara Mengimplementasikan Guliran Halus di React

Pengantar

Bergulir halus adalah pengganti mengklik tombol dan langsung dibawa ke bagian berbeda dari halaman yang sama dan pengguna diarahkan ke sana melalui animasi bergulir. Inilah salah satu fitur antarmuka tak kentara di situs yang menghasilkan perbedaan estetika.

Dalam artikel ini, Anda akan menggunakan paket react-scroll di npm untuk mengimplementasikan guliran halus.

Prasyarat

Anda akan memerlukan yang berikut untuk menyelesaikan tutorial ini:

• Instalasi Git yang valid. Untuk menyiapkannya, tinjau tutorial Memulai dengan Git.
• Node.js yang terinstal secara lokal, yang dapat Anda lakukan dengan mengikuti tutorial Cara Menginstal Node.js dan Membuat Lingkungan Pengembangan Lokal.

Tutorial ini telah diverifikasi dengan Node v13.14.0, npm v6.14.5, react v16.13.1, dan react-scroll v.1.7.16.

Memulai cepat: Menggunakan react-scroll

Anda akan membangun aplikasi sederhana dalam tutorial ini, tetapi jika Anda ingin ringkasan cepat tentang cara kerja react-scroll, silakan merujuk langkah-langkah yang telah diringkas ini:

Instal react-scroll:

npm i -S react-scroll

Impor paket react-scroll:

import { Link, animateScroll as scroll } from "react-scroll";

Tambahkan komponen tautan. Komponen <Link /> akan mengarahkan ke area tertentu dari aplikasi Anda:

<Link to="section1">

Mari kita mendalami lebih jauh dan membangun aplikasi React kecil dengan guliran halus.

Langkah 1 — Instal dan Jalankan Aplikasi React

Untuk kepraktisan, tutorial ini akan menggunakan proyek React pemula (menggunakan Create React App 2.0) yang memiliki bilah navigasi (atau navbar) di bagian atas bersama lima bagian konten berbeda.

Saat ini, tautan di bilah navigasi hanya tag jangkar, tetapi Anda akan memperbaruinya sebentar lagi untuk memungkinkan guliran halus.

Anda dapat menemukan proyek ini di React dengan Guliran Halus. Perhatikan bahwa tautan ini untuk cabang start. Cabang master menyertakan semua perubahan yang telah selesai.

Untuk mengkloning proyek, Anda dapat menggunakan perintah berikut:

git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

Jika mengamati direktori src/Components, Anda akan menemukan berkas Navbar.js yang berisi <Navbar> dengan nav-items yang terkait dengan lima <Section> berbeda.

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
  render() {
    return (
      <nav className="nav" id="navbar">
        <div className="nav-content">
          <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
          />
          <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
          </ul>
        </div>
      </nav>
    );
  }
}

Kemudian, jika Anda membuka berkas App.js dalam direktori src, Anda akan melihat bahwa <Navbar> disertakan bersama lima <Section> sebenarnya"

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="Section 1"
          subtitle={dummyText}
          dark={true}
          id="section1"
        />
        <Section
          title="Section 2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="Section 3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
        <Section
          title="Section 4"
          subtitle={dummyText}
          dark={false}
          id="section4"
        />
        <Section
          title="Section 5"
          subtitle={dummyText}
          dark={true}
          id="section5"
        />
      </div>
    );
  }
}

export default App;

Masing-masing komponen <Section> menerima title dan subtitle.

Karena proyek ini menggunakan teks semu di bagian berbeda, untuk mengurangi pengulangan kode, teks ini telah ditambahkan ke berkas DummyText.js diimpor, dan diberikan ke setiap komponen <Section>.

Untuk menjalankan aplikasi, Anda dapat menggunakan perintah berikut.

cd React-With-Smooth-Scrolling
npm install
npm start

Ini akan memulai aplikasi dalam mode pengembangan dan secara otomatis memperbarui aplikasi saat Anda menyimpan berkas. Anda dapat melihatnya dalam peramban di localhost:3000.

Langkah 2 — Menginstal dan Mengonfigurasi React-Scroll

Sekarang saatnya menginstal paket react-scroll dan menambahkan fungsionalitas itu. Anda dapat menemukan informasi paket di npm.

Untuk menginstal paket, jalankan perintah berikut:

npm install react-scroll

Selanjutnya, buka cadangan berkas Navbar.js dan tambahkan import untuk dua impor yang diberi nama, Link dan animateScroll.

import { Link, animateScroll as scroll } from "react-scroll";

Perhatikan bahwa saya telah memberi alias animatedScroll pada scroll agar mudah digunakan.

Dengan semua impor yang didefinisikan, kini Anda dapat memperbarui nav-items agar menggunakan komponen <Link>. Komponen ini membutuhkan beberapa properti. Anda dapat membaca tentang semuanya di halaman dokumentasi.

Untuk saat ini, berikan perhatian khusus pada activeClass, to, spy, smooth, offset, dan duration.

• activeClass - Kelas yang diterapkan bila elemen tercapai.
• to - Target untuk menggulir.
• spy - Untuk membuat Link yang dipilih saat scroll berada di posisi yang ditargetkan.
• smooth - Untuk menganimasikan guliran.
• offset - Untuk menggulir px tambahan (seperti lapisan).
• duration - Waktu animasi guliran. Bisa berupa angka atau fungsi.

Properti to adalah bagian terpenting karena memberi tahu komponen agar menggulir ke elemen mana. Dalam hal ini, properti ini akan menjadi setiap <Section>.

Dengan properti offset, Anda dapat mendefinisikan jumlah guliran tambahan yang harus dilakukan untuk sampai ke setiap <Section>.

Berikut ini contoh properti yang Anda akan gunakan untuk setiap komponen <Link>. Satu-satunya perbedaannya adalah properti to, karena mengarahkan setiap titik ke <Section> yang berbeda:

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

Anda akan perlu memperbarui setiap nav-items sebagaimana mestinya. Dengan menambahkannya, Anda dapat kembali ke peramban (aplikasi Anda akan dimulai ulang secara otomatis) dan melihat guliran halus beraksi.

Langkah 3 — Menata Gaya Tautan Aktif

Properti activeClass memungkinkan Anda mendefinisikan kelas yang akan diterapkan ke komponen <Link> bila elemen to aktif. <Link> dianggap aktif jika elemen to ditampilkan dekat bagian atas halaman. Ini dapat dipicu dengan mengklik <Link> itu sendiri atau dengan menggulir bawah ke <Section> secara manual.

Untuk membuktikannya, saya membuka Chrome DevTools dan memeriksa <Link> kelima seperti yang ditunjukkan di bawah. Bila saya mengklik <Link> itu atau secara manual menggulir ke bagian bawah halaman, saya akan melihat bahwa kelas aktif memang benar diterapkan.

Untuk memanfaatkannya, Anda dapat membuat kelas aktif dan menambahkan garis bawah pada tautan. Anda dapat menambahkan sedikit CSS ini dalam berkas App.cs di direktori src:

.nav-item > .active {
    border-bottom: 1px solid #333;
}

Sekarang, jika Anda kembali ke peramban dan menggulir sedikit ke sekitar, Anda akan melihat <Link> yang sesuai telah digarisbawahi.

Langkah 4 — Memberikan Fungsi Tambahan

Untuk bagian konten terakhir, paket ini juga menyediakan beberapa fungsi yang dapat dipanggil langsung seperti scrollToTop, scrollToBottom, dll. serta berbagai kejadian yang Anda dapat tangani.

Merujuk fungsi ini, biasanya, logo aplikasi di bilah navigasi akan membawa pengguna ke halaman beranda atau bagian atas halaman saat ini.

Sebagai contoh sederhana tentang cara memanggil salah satu fungsi yang disediakan, saya menambahkan pengatur klik ke nav-logo untuk mengembalikan pengguna ke bagian atas halaman, seperti ini:

scrollToTop = () => {
    scroll.scrollToTop();
};

Kembali ke peramban, Anda seharusnya dapat menggulir bawah di halaman itu, mengklik logo di bilah navigasi, dan akan dibawa kembali ke bagian atas halaman.

Kesimpulan

Guliran halus adalah salah satu fitur yang dapat menambahkan banyak nilai estetika ke aplikasi Anda. Paket react-scroll memungkinkan Anda memanfaatkan fitur ini tanpa pengeluaran tambahan yang signifikan.

Dalam tutorial ini, Anda menambahkan guliran halus ke aplikasi dan bereksperimen dengan berbagai pengaturan. Jika Anda ingin tahu, luangkan waktu untuk menjelajahi fungsi dan kejadian lainnya yang ditawarkan paket ini.