Skip to content

Instantly share code, notes, and snippets.

View apostolos's full-sized avatar

Apostolos Tsakpinis apostolos

View GitHub Profile
@pontusab
pontusab / proximity-prefetch.tsx
Created April 6, 2025 06:43
Next.js Proximity Prefetch (PPF)
"use client";
import { useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { useCallback, useEffect, useState } from "react";
interface ProximityPrefetchProps {
children: ReactNode;
threshold?: number;
predictionInterval?: number;
@alexanderson1993
alexanderson1993 / AlertDialogProvider.tsx
Created April 2, 2023 19:07
A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.
"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
@bvaughn
bvaughn / attaching-manual-event-listeners-in-passive-effect.js
Last active July 6, 2022 23:34
Attaching manual event listeners in a passive effect
// Simplistic (probably most common) approach.
//
// This approach assumes either that:
// 1) passive effects are always run asynchronously, after paint, or
// 2) passive effects never attach handlers for bubbling events
//
// If both of the above are wrong (as can be the case) then problems might occur!
useEffect(() => {
const handleDocumentClick = (event: MouseEvent) => {
// It's possible that a "click" event rendered the component with this effect,
import React from "react";
import { Link } from "react-router-dom";
export function createResource(getPromise) {
let cache = {};
let inflight = {};
let errors = {};
function load(key) {
inflight[key] = getPromise(key)
animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)
function NewPostDialog({ date, show, onDismiss }) {
const rootRef = useRef(null)
const transitions = useTransition(show, null, {
from: { opacity: 0, y: -10, blur: 0 },
enter: { opacity: 1, y: 0, blur: 8 },
leave: { opacity: 0, y: -10, blur: 0 },
@kitze
kitze / LongPress.js
Last active January 8, 2019 07:40
A LongPress component for React
import {React, Component} from 'react';
class LongPress extends Component {
shouldShortPress = true;
componentDidMount() {
this.listenForTouch();
}
componentWillUnmount() {
@ebidel
ebidel / sw_caching_size.js
Last active November 16, 2022 11:31
Print service worker cache sizes and overall bytes cached.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
async function getCacheStoragesAssetTotalSize() {
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.
@vincentriemer
vincentriemer / ResizeObservable.js
Created December 4, 2017 20:15
React Component prototype that provides element query functionality via ResizeObserver
// @flow
import * as React from "react";
import ResizeObserver from "resize-observer-polyfill";
import invariant from "invariant";
type Entry = {
+contentRect: {
+width: number,
+height: number