CodeSnips

typescript

import { useCallback, useEffect, useState } from "react";

interface Options {
  rootMargin?: string;
  threshold?: number;
}

IntersectionObserver infinite scroll hook

react hooks intersection-observer

by codesnips 3 tabs

typescript

import { useEffect, useState, useRef } from 'react'

interface UseInViewOptions {
  threshold?: number | number[]
  rootMargin?: string
  triggerOnce?: boolean

Intersection Observer API for visibility tracking

react performance intersection-observer

by Maya Patel 2 tabs

javascript

import { useCallback, useEffect, useRef, useState } from 'react';

export function usePaginatedFetch(fetchPage, { pageSize = 20 } = {}) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

Infinite Scroll in React with IntersectionObserver and a Paginated Fetch Hook

react hooks infinite-scroll

by codesnips 3 tabs

typescript

import { useCallback, useEffect, useRef, useState } from "react";

export function useIntersectionObserver(options?: IntersectionObserverInit) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const nodeRef = useRef<Element | null>(null);
  const optionsKey = JSON.stringify(options ?? {});

Infinite-Scroll Feed with a React IntersectionObserver Hook and Cursor Pagination

react hooks intersection-observer

by codesnips 3 tabs

javascript

import { useState, useRef, useEffect, useCallback } from 'react';

export function useOnScreen(options = {}) {
  const [node, setNode] = useState(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

Infinite Scroll in React with an IntersectionObserver useOnScreen Hook

react hooks intersection-observer

by codesnips 3 tabs

javascript

import { Controller } from "@hotwired/stimulus"
import { NotificationsApi } from "notifications_api"

export default class extends Controller {
  static targets = ["notification"]
  static values = {

Stimulus: intersection observer for “mark as read”

rails stimulus hotwire

by codesnips 3 tabs