"use client"
 
import * as React from "react"
 
import { useInView } from "@/hooks/use-in-view"
 
export function Component() {
  const ref = React.useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { threshold: 0.5, rootMargin: "50px" })
 
  return (
    <div>
      <div
        ref={ref}
        style={{ height: "100px", background: isInView ? "green" : "red" }}
      >
        {isInView ? "Visible" : "Not Visible"}
      </div>
      <div style={{ height: "1000px" }}>Scroll down...</div>
    </div>
  )
}