Next.js Discord

Discord Forum

i seem to be struggling on refs and using them in external components

Unanswered
Black Caiman posted this in #help-forum
Open in Discord
Black CaimanOP
basically, i have a button component in a seperate file, a body component in a separate file with the button component implemented within and then the whole body component is in the page.tsx. this button is supposed to allow u to scroll down to the next section. how do i do this with refs.

4 Replies

Black CaimanOP
"use client";
import { AudioBtn } from "./AudioBtn";
import { TypeAnimation } from "react-type-animation";
import { motion } from "framer-motion";
import { useState } from "react";

const Body = () => {
  const [visible, setVisible] = useState(false);
  const [startTyping, setStartTyping] = useState(false);

  setTimeout(() => {
    setStartTyping(true);
  }, 1200);

  setTimeout(() => {
    setVisible(true);
  }, 3000);

  return (
    <>
      <motion.div className="min-h-screen min-w-screen flex flex-col items-center justify-center">
        {startTyping && (
          <TypeAnimation
            className="leading-14 text-center mx-3 mb-8 text-5xl sm:text-5xl font-bold text-emerald-300 selection:text-gray-700"
            sequence={[
              "Discover The Divine Words",
              2000,
              "",
              500,
              "Unlock Your Potential",
              2000,
              "",
              1000,
              "Build Your Akhirah",
              2000,
              "",
              1000,
            ]}
            speed={20}
            deletionSpeed={20}
            repeat={Infinity}
          ></TypeAnimation>
        )}
        {visible && <AudioBtn/>}
      </motion.div>
    </>
  );
};

export default Body;
import { motion } from "framer-motion";
import { ArrowDown } from "lucide-react";
export const AudioBtn = () => {
  return (
    <>
      <motion.button
        className="relative flex cursor-pointer rounded-full border border-emerald-400 px-3 py-2.5 text-emerald-400 transition-colors hover:bg-emerald-900 sm:px-6 sm:py-3.5"
        initial={{ y: 100, opacity: 0 }}
        whileInView={{ y: 0, opacity: 1 }}
        whileHover={{ scale: 0.95 }}
        whileTap={{ scale: 0.95 }}
        transition={{ duration: 1.5, ease: "easeInOut" }}
      >
        <span className="ml-1 selection:text-gray-700">Audio Recitations</span>
        <span className="ml-1">
          <ArrowDown />
        </span>
      </motion.button>
    </>
  );
};
"use client";
import Header from "./Header";
import Body from "./Body";
import Surah_Card from "./Surah_Card";
import { useEffect, useRef } from "react";

const Page = () => {
  const surahsRef = useRef<HTMLDivElement>(null);
  const handleClick = () => {
    surahsRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <div className="flex flex-col">
        <Header />
        <div className="flex min-h-screen max-w-screen flex-col items-center justify-center overflow-x-hidden border-none bg-gradient-to-br from-gray-900 via-gray-800 to-emerald-900">
          <Body />
          <div ref={surahsRef}>
            <Surah_Card />
          </div>
        </div>
      </div>
    </>
  );
};

export default Page;