Some amazing JS components

We all want to make this cool website with all these amazing features, well I'll help with some of those features like;

React-scroll: This react component that helps to animate vertical scrolling on your webpage/web app. Cool right🤗 ?
React intersection observer: This is another amazing js component that you can implement in your web project to do anything like animation, text/ background color change, etc. The react intersection observer tells you when an element enters a certain viewport.

Why all this explanation with no example 🙄, Don't worry I got you covered ;).

This is an example of using the above react components in your web project.

The link to check out the above demonstration is here or check out my git repo here

Let get buildy 👷🏻‍♂️🛠️

Technologies Used

After a successful Installation of the above technologies, the folders in code editor should be similar to:

Step 1

Go to your Index.js file inside the pages folder and
import theses necessary components to be used in the example

import { Link, Element } from "react-scroll";
import { useInView } from "react-intersection-observer";

The Link class imported from the react-scroll component serves as a link to the Element class also imported.
Which means the Link_scrolls to the specified _Element.

Whereby the useInView hook checks if a particular element is in view when scrolling action a]happens on the screen.

Step 2

Copy this into the Home default function

// These are references to each page shown  
const { ref: PAGE_ONE, inView: viewOne } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_TWO, inView: viewTwo } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_THREE, inView: viewThree } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_FOUR, inView: viewFour } = useInView({
    threshold: 0.3,
  });

// An array of each page and its details
  const pagesAndDetails = [
    { title: "PAGE_ONE", details: "Details of Page One" },
    { title: "PAGE_TWO", details: "Details of Page Two" },
    { title: "PAGE_THREE", details: "Details of Page Three" },
    { title: "PAGE_FOUR", details: "Details of Page Four" },
  ];
// An array of each page's colors
  const colors = ["#b8c7ce ", "#E9E948", "#f1f1f1 ", "#7bc191"];

Step 3

Copt this into the return function

<>
      <Head>
        <title>React Scroll Web</title>
        <meta
          name="description"
          content="An example of a react scroll website"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="w-full">
        <div className="flex flex-wrap items-center justify-between px-12 fixed">
          <Link
            activeClass="active"
            to="PAGE ONE"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#b8c7ce] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewOne ? (
              <span>YOU ARE AT {pagesAndDetails[0].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[0].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE TWO"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#E9E948] rounded-xl border-2 border-white cursor-pointer  mr-4"
          >
            {viewTwo ? (
              <span>YOU ARE AT {pagesAndDetails[1].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[1].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE THREE"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#f1f1f1] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewThree ? (
              <span>YOU ARE AT {pagesAndDetails[2].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[2].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE FOUR"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#7bc191] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewFour ? (
              <span>YOU ARE AT {pagesAndDetails[3].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[3].title}</span>
            )}
          </Link>
        </div>

        <Element
          name="PAGE ONE"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[0],
          }}
        >
          <div
            ref={PAGE_ONE}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[0].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[0].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE TWO"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[1],
          }}
        >
          <div
            ref={PAGE_TWO}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[1].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[1].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE THREE"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[2],
          }}
        >
          <div
            ref={PAGE_THREE}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[2].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[2].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE FOUR"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[3],
          }}
        >
          <div
            ref={PAGE_FOUR}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[3].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[3].details}</div>
          </div>
        </Element>
      </div>
    </>