Skip to content

Instantly share code, notes, and snippets.

View saltnpixels's full-sized avatar

Eric saltnpixels

View GitHub Profile
@saltnpixels
saltnpixels / useStickyObserver.tsx
Created April 9, 2024 13:01
Sticky Intersect Observer
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>();
@saltnpixels
saltnpixels / useResizeObserver.tsx
Created April 2, 2024 15:33
React Resize Observer
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
saltnpixels / swiper.tsx
Last active May 7, 2024 19:40
Swiper with react customizable
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
saltnpixels / useSticky.tsx
Last active August 16, 2022 20:48
useSticky
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
saltnpixels / infiniteScroller.tsx
Created May 3, 2022 18:11
React Infinite Scroller that works smartly
// 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
saltnpixels / base.css
Last active January 11, 2022 02:12
CSS Base
html {
font-size: 62.5%;
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
@saltnpixels
saltnpixels / aspect-ratio
Created June 17, 2021 14:05
aspect-ratio images
.aspect-ratio {
position: relative;
// needs a set height, so override when using on a component
&::before {
content: "";
display: block;
height: 0;
width: 100%;
}
if ( ! function_exists( 'set_tag_cloud_sizes' ) ) {
/**
* Removes the inline font sizing.
*
* @param string $tags holds markup of tags
*
* @return string
*/
function set_tag_cloud_sizes( string $tags ): string {
return preg_replace( '/style="font-size: \d+pt;"/', '', $tags );
@saltnpixels
saltnpixels / entry-content.css
Created June 2, 2021 18:36
Centered Content for WP Blocks
.entry-content,
.article-footer,
.after-article {
padding-left: var(--spacing-20);
padding-right: var(--spacing-20);
&::after {
clear: both;
content: "";
}