DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Adebayo Olamilekan
Adebayo Olamilekan

Posted on

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;

  1. React-scroll: This react component that helps to animate vertical scrolling on your webpage/web app. Cool rightπŸ€— ?

  2. 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.

Result

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:

Code editor

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";
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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>
    </>
Enter fullscreen mode Exit fullscreen mode

The above code links each button to a page element and changes text when the page is in view.

Step 4

Run the project

npm run dev 

 // or

yarn dev
Enter fullscreen mode Exit fullscreen mode

Great work πŸŽŠπŸŽŠπŸŽ‰πŸŽ‰

There are more better ways to use these components in your project this is just a simple example.

Look out for more amazing JS components.

Top comments (0)

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

β†’ Join the Hackathon <-