1"use strict";(self.webpackChunkreactuals_docs=self.webpackChunkreactuals_docs||[]).push([[8452],{2617:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>m,contentTitle:()=>h,default:()=>g,frontMatter:()=>u,metadata:()=>t,toc:()=>x});const t=JSON.parse('{"id":"Hooks/useOnScreen","title":"useOnScreen()","description":"The useOnScreen hook detects whether a specified DOM element is visible in the viewport, returning a boolean indicating its intersection status. It uses the Intersection Observer API and supports an optional rootMargin for adjusting the observation area. This is useful for lazy loading, triggering animations, or tracking visibility.","source":"@site/docs/Hooks/useOnScreen.mdx","sourceDirName":"Hooks","slug":"/Hooks/useOnScreen","permalink":"/docs/Hooks/useOnScreen","draft":false,"unlisted":false,"editUrl":"https://github.com/reactuals/reactuals-docs/tree/main/docs/Hooks/useOnScreen.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"useOnClickOutside()","permalink":"/docs/Hooks/useOnClickOutside"},"next":{"title":"useOnlineStatus()","permalink":"/docs/Hooks/useOnlineStatus"}}');var i=s(4848),r=s(8453),a=s(5363),o=s(6540),l=s(6755),c=s(6704);const d=()=>{const e=Array.from({length:15},((e,n)=>({id:n+1,author:`User ${n+1}`,text:`This is a sample comment ${n+1} with some content to simulate a data-heavy component.`}))),n=({author:e,text:n})=>{const s=(0,o.useRef)(null),t=(0,l.Pd)(s,"100px");return(0,i.jsx)("div",{ref:s,className:"p-4 rounded-lg w-full transition-all duration-1000 "+(t?"bg-white shadow-md opacity-100":"bg-gray-200 opacity-50"),children:t?(0,i.jsxs)("div",{className:"flex flex-col gap-2 animate-fadeIn",children:[(0,i.jsx)("p",{className:"text-base font-semibold",children:e}),(0,i.jsx)("p",{className:"text-sm text-gray-600",children:n}),(0,i.jsxs)("div",{className:"flex gap-2",children:[(0,i.jsx)("button",{className:"px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm transition duration-300",children:"Like"}),(0,i.jsx)("button",{className:"px-2 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm transition duration-300",children:"Reply"})]})]}):(0,i.jsx)("div",{className:"h-24 flex items-center justify-center text-gray-500",children:(0,i.jsx)("div",{className:"animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"})})})};return(0,i.jsxs)(c.F,{children:[(0,i.jsxs)("div",{className:"flex flex-col items-center gap-6 max-w-2xl w-full",children:[(0,i.jsx)("p",{className:"text-lg text-center",children:"Scroll down to lazy-load comments with a slow animation, showing performance optimization."}),(0,i.jsx)("div",{className:"h-[50vh]"}),(0,i.jsx)("div",{className:"flex flex-col gap-4 w-full",children:e.map((e=>(0,i.jsx)(n,{author:e.author,text:e.text},e.id)))}),(0,i.jsx)("div",{className:"h-[50vh]"}),(0,i.jsx)("p",{className:"text-sm text-center text-gray-600",children:"Scroll to see comments load with a slow fade-in effect, reducing initial render time."})]}),(0,i.jsx)("style",{jsx:!0,children:"\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .animate-fadeIn {\n animation: fadeIn 1000ms ease-out;\n }\n "})]})},u={},h="useOnScreen()",m={},x=[{value:"Import",id:"import",level:3},{value:"Demo",id:"demo",level:3},{value:"Usage",id:"usage",level:3}];function p(e){const n={code:"code",div:"div",h1:"h1",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"useonscreen",children:"useOnScreen()"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"useOnScreen"})," hook detects whether a specified DOM element is visible in the viewport, returning a boolean indicating its intersection status. It uses the Intersection Observer API and supports an optional ",(0,i.jsx)(n.code,{children:"rootMargin"})," for adjusting the observation area. This is useful for lazy loading, triggering animations, or tracking visibility."]}),"\n",(0,i.jsx)(n.h3,{id:"import",children:"Import"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import { useOnScreen } from "reactuals";\n'})}),"\n",(0,i.jsx)(n.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,i.jsx)(a.A,{fallback:(0,i.jsx)(n.div,{children:"Loading..."}),children:()=>(0,i.jsx)(d,{})}),"\n",(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import React, { useRef } from "react";\nimport { useOnScreen } from "reactuals";\n\nexport const Component = () => {\n const ref = useRef(null);\n const isVisible = useOnScreen(ref);\n\n return (\n <div>\n <p>Scroll down to see the element enter the viewport.</p>\n <div style={{ height: "100vh" }}></div>\n <div\n ref={ref}\n style={{ background: isVisible ? "lightgreen" : "lightgray" }}\n >\n <p>Element is {isVisible ? "visible" : "not visible"}!</p>\n </div>\n </div>\n );\n};\n'})})]})}function g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.