Skip to main content
components

Render on View

Defer rendering of components until they enter the viewport for performance optimization.

Package@g4rcez/componentsSectionUtilities

Examples

Basic RenderOnView

Scroll down to see the 'TESTING' text appear. An alert will trigger when the component becomes visible.

Scroll down to see the component
End of page
tsx
"use client";
import { RenderOnView } from "@g4rcez/components";

function BasicRenderOnView() {
  return (
    <div>
      <div style={{ 
        height: "1000px", 
        background: "linear-gradient(to bottom, hsla(0, 0%, 94%), hsla(0, 0%, 88%))" 
      }}>
        Scroll down to see the component
      </div>
      <RenderOnView onIntersection={() => alert("Component is now visible!")}>
        <span className="text-xl font-bold text-primary">TESTANDO</span>
      </RenderOnView>
      <div style={{ 
        height: "1000px", 
        background: "linear-gradient(to bottom, hsla(0, 0%, 88%), hsla(0, 0%, 94%))" 
      }}>
        End of page
      </div>
    </div>
  );
}

When to use Render on View

Use when

You need the documented Render on View interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Render on View behavior you need.

Accessibility

Keep the Render on View labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.