Skip to content

Instantly share code, notes, and snippets.

View saltnpixels's full-sized avatar

Eric Greenfield saltnpixels

View GitHub Profile
@saltnpixels
saltnpixels / swiper.tsx
Last active March 18, 2024 19:54
Swiper with react customizable
import { useRef, useEffect, Children, cloneElement, ReactElement, 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 uniqueId from 'lodash.uniqueid';
import { Variants } from 'framer-motion';
// now importing all thee manually with emotion
@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: "";
}
@saltnpixels
saltnpixels / button-arrow.svg
Last active May 12, 2021 17:22
svg Animate from within
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@saltnpixels
saltnpixels / svg_allowed_html
Last active May 10, 2021 19:22
Get SVG File in php
function get_svg_allowed_html() {
$allowed_html = [
'svg' => [
'fill' => true,
'height' => true,
'width' => true,
'xmlns' => true,
'viewbox' => true,
'class' => true,
'transform' => true,