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 / save_upload_field_to_custom_field.php
Last active January 18, 2024 20:32
gravity form upload file to media library and use attachment ID in custom field
add_action( 'gform_after_create_post', 'gf_add_to_media_library', 10, 3 );
/**
* Save file upload fields under custom post field to the library
*
* @param $post_id The post identifier
* @param $entry The entry
* @param $form The form
*/
@saltnpixels
saltnpixels / membership_meta.php
Last active November 3, 2022 19:55
adding membership meta to rcp from ACF
<?php
/*--------------------------------------------------------------
# Saving Features to Membership Levels from an acf repeater field for RCP Pro
--------------------------------------------------------------*/
function some_feature_list( $level ) {
/**
* @var RCP_Levels $rcp_levels_db
*/
global $rcp_levels_db;
@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 / 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 / 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: "";
}