saltnpixels

// must have a loading state that turns true when fetching data and false afterwards
// callback is responsible for setting loading state as well as deciding if it should even run. (check if pages left etc...)
// scrollingElement defaults to viewport if none used. If wanted put it as a ref on a scrollable element
// sentry must be placed as a ref and is not optional

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

export default function useInfiniteScroller({
  isLoading,
  callback,

saltnpixels

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

/**
 * Returns a ref, and a stateful value bound to the ref as well as observe function
 * The observe runs automatically on window scroll but you can observe another elements scroll if you want
 */
export default function useSticky<T extends HTMLElement>(fn ?: (stickyActive?: boolean)=> void) {
  const stickyRef = useRef<T>(null);
  const [sticky, setSticky] = useState(false);

saltnpixels

import { useRef, useEffect, useState } from 'react';
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';
import { Pagination, Navigation } from 'swiper/modules';
import { Box, BoxProps, MotionBox } from '@components';
import { Chevronleft, Chevronright } from '@/icons';
import { Variants } from 'framer-motion';

// now importing all thee manually with emotion
// import 'swiper/css';

saltnpixels

import { useState, useLayoutEffect } from 'react';
import throttle from 'lodash.throttle';

function useResizeObserver(ref: React.MutableRefObject<any>) {
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
    dimensionsLoaded: false,
  });

saltnpixels

const useStickyScroll = (
    {
        elementRef,
        containerRef
    }: {elementRef: any; containerRef?: any; onScroll?: (y: number) => void},
    dependencies: any[] = []
) => {
    const [isSticky, setIsSticky] = useState(false);
    // Use useRef for the callback to avoid triggering re-renders
    const onCallbackRef = useRef<(y: number) => void>();