كيف يمكن تنزبل react scroll

يمكنك تنزيلها عن طريق الأمر التالي:

npm install react-scroll

عادة عندما نتعامل مع مكتبات كهذه نذهب إلى صفحة npm الرسمية ونبحث عن المكتبة.

يوجد في المكتبة طريقة التحميل وطريقة التعامل مع المكتبة مما يسهل علينا العمل ما يجب علينا هو قراءة التوثيقات لكنها قد تحتاج اللغة الانجليزية.

يمكنك تنزيل وتثبيت react-scroll في تطبيق React الخاص بك عن طريق تشغيل الأمر التالي في سطرالأوامر (terminal) 

npm install react-scroll

وبعدها يمكنك استيراد المكون الذي تريده كالتالي

import { Link, Element } from 'react-scroll';

أو استيراد المكتبة كاملة 

import * from react-scroll;

بتثبيت المكتبة من خلال الأمر:

npm install react-scroll

ثم استيرادها في المكون الذي تريده وليكن App.js أو مكون الشريط العلوي Navbar.js،  عليك باستيراد المكونات الرئيسية من المكتبة Link و Element.

حيث Link هو المكون الذي ستضغط عليه لبدء التنقل مثل رابط في القائمة، بينما Element هو المكون الذي يلتف حول القسم الذي تريد الانتقال إليه أي الوجهة.

import { Link, Element } from 'react-scroll';

وكمثال بسيط:

import React from 'react';
import { Link, Element } from 'react-scroll';
import './App.css'; 

function App() {
  return (
    <div className="App">
      <nav className="navbar">
        <Link to="section1" smooth={true} duration={500} className="nav-link">
          القسم الأول
        </Link>
        <Link to="section2" smooth={true} duration={500} className="nav-link">
          القسم الثاني
        </Link>
        <Link to="section3" smooth={true} duration={500} className="nav-link">
          القسم الثالث
        </Link>
      </nav>

      <Element name="section1" className="section">
        <h1>القسم الأول</h1>
      </Element>

      <Element name="section2" className="section bg-grey">
        <h1>القسم الثاني</h1>
      </Element>

      <Element name="section3" className="section">
        <h1>القسم الثالث</h1>
      </Element>
    </div>
  );
}

export default App;