@arraypress/in-view

React hook for detecting when an element enters the viewport using Intersection Observer. Triggers once and stays true.

Install

npm install @arraypress/in-view

Peer dependency: react >= 18

Usage

useInView(threshold?)

Returns a [ref, isInView] tuple. Attach the ref to the element you want to observe. isInView becomes true when the element enters the viewport and stays true permanently (no re-triggering on scroll back).

import { useInView } from '@arraypress/in-view';

function FadeInSection({ children }) {
  const [ref, inView] = useInView(0.1);

  return (
    <div
      ref={ref}
      style={{
        opacity: inView ? 1 : 0,
        transition: 'opacity 0.6s ease-out',
      }}
    >
      {children}
    </div>
  );
}

Parameters:

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | threshold | number | 0.1 | Percentage of element that must be visible (0-1). |

Returns: [ref, isInView] — a React ref to attach to the element, and a boolean.

Pairing with @arraypress/count-up

import { useInView } from '@arraypress/in-view';
import { useCountUp } from '@arraypress/count-up';

function StatCard({ value, label }) {
  const [ref, inView] = useInView(0.1);
  const display = useCountUp(value, inView);

  return (
    <div ref={ref}>
      <span>{display}</span>
      <span>{label}</span>
    </div>
  );
}

<StatCard value="10,000+" label="Downloads" />
<StatCard value="4.9/5" label="Rating" />

License

MIT