React Intersection Observer Hook

A flexible and customizable React hook for tracking element visibility using the Intersection Observer API.

Installation

npm install rioh --save

Usage

import React from 'react';
import { useIntersectionObserver } from 'rioh';

const MyComponent = () => {
  const { refs, activeSection } = useIntersectionObserver(
['section1', 'section2', 'section3'],
{
topOffset: 50,
threshold: [0, 0.1, 0.5],
rootMargin: '-10px 0px -99% 0px'
}
  );

  return (
        <div>
            <nav> Active: {activeSection}</nav>
            <div ref={refs.section1}>Section 1 Content</div>
            <div ref={refs.section2}>Section 2 Content</div>
            <div ref={refs.section3}>Section 3 Content</div> 
        </div>
  );
};

API

Parameters

• sections: Array of section identifiers
• options: Configuration object
  • threshold: Intersection thresholds (default: [0, 0.1, 0.5])
  • rootMargin: Root margin (default: '-10px 0px -99% 0px')
  • topOffset: Top offset for visibility calculation (default: 50)
  • root: Root element (default: null)

Returns

• refs: Object with refs for each section
• activeSection: Currently active section identifier
• setActiveSection: Function to manually set active section

Step 9: Build the Package

npm run build