Skip to content

Instantly share code, notes, and snippets.

View codemile's full-sized avatar

Nick Foscarini codemile

View GitHub Profile
@codemile
codemile / useDeepMemo.tsx
Created January 2, 2025 17:09
Custom React hook for deep memoization of values with a configurable equality function using useRef.
import { useRef } from 'react';
import isEqual from 'lodash.isequal';
export function useDeepMemo<TValue>(
value: TValue,
isEqualFn: (a: TValue, b: TValue) => boolean = isEqual
): TValue {
const ref = useRef<TValue>(value);
// Update ref if the value has changed
@codemile
codemile / useWhiteBlackList.tsx
Created January 2, 2025 17:04
Custom React hook for filtering a list using optional whitelist and blacklist arrays with a custom includes function
import {useMemo, useRef} from 'react';
export function useWhiteBlackList<TData, TFilter>(
{
whitelist: whitelistProp,
blacklist: blacklistProp,
list
}: {
whitelist?: Array<TFilter>;
blacklist?: Array<TFilter>;
@codemile
codemile / useStableArray.tsx
Created January 2, 2025 17:00
Custom React hook to maintain a stable reference for an array when its values change
import {useEffect, useState} from 'react';
export function useStableArray<TType>(
items?: Array<TType>
): Array<TType> | undefined {
const [stableArray, setStableArray] = useState<Array<TType>>(items);
useEffect(() => {
if (JSON.stringify(items) !== JSON.stringify(stableArray)) {
setStableArray(items);
@codemile
codemile / SourceCode.tsx
Created January 2, 2025 16:58
React component for syntax highlighting using Prism.js with support for multiple languages and a custom theme
import classNames from 'classnames';
import Prism from 'prismjs';
import {FC, useEffect, useMemo, useRef} from 'react';
import {ClassNameProps} from '../utils/withClassName';
import 'prismjs';
import 'prismjs/themes/prism-solarizedlight.css';
import 'prismjs/components/prism-shell-session';
import 'prismjs/components/prism-graphql';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-turtle';
@codemile
codemile / PendingOverlay.tsx
Created January 2, 2025 16:57
React component for displaying a loading overlay with a spinner using MUI's CircularProgress.
import {CircularProgress} from '@mui/material';
import {FC, PropsWithChildren} from 'react';
interface PendingOverlayProps {
isPending: boolean;
}
export const PendingOverlay: FC<PropsWithChildren<PendingOverlayProps>> = ({
isPending,
children
@codemile
codemile / JsonBlock.tsx
Created January 2, 2025 16:55
React functional component to display and syntax-highlight JSON using Prism.js
import Prism from 'prismjs';
import {FC, useEffect, useMemo, useRef} from 'react';
interface JsonBlockProps {
indent?: number;
value: unknown;
}
export const JsonBlock: FC<JsonBlockProps> = ({indent, value}) => {
@codemile
codemile / ClipboardIconButton.tsx
Created January 2, 2025 16:53
React TypeScript component for clipboard copy/paste functionality with MUI icons and tooltips.
import CheckIcon from '@mui/icons-material/Check';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import {IconButton, Tooltip} from '@mui/material';
import {FC, useState} from 'react';
import {useBounceValue} from './hooks/useBounceValue';
interface ClipboardIconButtonProps {
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
@codemile
codemile / trimPublicKey.ts
Created January 2, 2025 16:51
Utility function to trim a public key string to a specified size with ellipsis.
export function trimPublicKey(publicKey: string, size: number): string {
return publicKey.length <= size * 2
? publicKey
: `${publicKey.slice(0, size)}...${publicKey.slice(-size)}`;
}
@codemile
codemile / HashString.tsx
Created January 2, 2025 16:49
A TypeScript utility function to generate a 32-bit hash for a given string.
export function hashString(str: string): number {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = (hash << 5) - hash + str.charCodeAt(i);
hash |= 0; // Convert to 32-bit integer
}
return Math.abs(hash);
}
@codemile
codemile / propsWithClassName.ts
Created January 2, 2025 16:48
Utility function to merge Tailwind classes with clsx and twMerge, plus a TypeScript type for props with className.
import {type ClassValue, clsx} from 'clsx';
import {twMerge} from 'tailwind-merge';
export type PropsWithClassName<P = unknown> = P & {
className?: ClassValue | undefined;
};
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}