Skip to content

Instantly share code, notes, and snippets.

View happyfrog-dev's full-sized avatar

happyfrog-dev

View GitHub Profile
@happyfrog-dev
happyfrog-dev / Accordion.tsx
Created February 2, 2026 14:05
Compound Accordion component with React context
import React, {
useState,
useContext,
createContext,
type ReactNode,
} from 'react';
type AccordionContextValue = {
isOpen: boolean;
toggle: () => void;
@happyfrog-dev
happyfrog-dev / validation.pipe.ts
Last active February 2, 2026 13:54
Custom NestJS validation pipe with class-validator
import {
ArgumentMetadata,
Injectable,
PipeTransform,
} from '@nestjs/common';
import { plainToInstance } from 'class-transformer';
import { validate } from 'class-validator';
export class ValidationException extends Error {
@happyfrog-dev
happyfrog-dev / useSubscriptionWatcher.ts
Last active February 2, 2026 13:55
React hook to poll subscription status and redirect on expiry
import { useEffect, useRef } from 'react';
type SubscriptionStatus = {
isExpired: boolean;
isActive: boolean;
};
type SubscriptionWatcherOptions = {
isUserVerified: boolean;
pollIntervalMs?: number;
@happyfrog-dev
happyfrog-dev / extractTranscript.ts
Last active February 2, 2026 13:56
Extracting transcript from a video page script object
type CaptionTrack = {
languageCode: string;
kind?: string; // e.g. "asr" for auto-generated
baseUrl: string;
};
type PlayerResponse = {
videoDetails: {
videoId: string;
title: string;
@happyfrog-dev
happyfrog-dev / index.js
Created February 2, 2026 12:46
useScreenshot hook allows to enable a full-screen transparent overlay for selecting a region of the viewport. Technologies: React, JS, DOM API
import { useCallback, useEffect, useRef, useState } from 'react';
export const useScreenshot = () => {
const [isScreenshotEnabled, setIsScreenshotEnabled] = useState(false);
const [selection, setSelection] = useState('None');
const [startX, setStartX] = useState(0);
const [startY, setStartY] = useState(0);
const [dx, setDx] = useState(0);
const [dy, setDy] = useState(0);
const containerRef = useRef(null);
@happyfrog-dev
happyfrog-dev / index.ts
Created February 2, 2026 12:46
useScrollTracker hook that tracks the currently active section on scroll. Technologies: React, TS, Lodash
import { useEffect, useState } from "react";
import { debounce } from "lodash";
import { normalizeString } from "@/utils";
export default function useScrollTracker(sectionIds: string[]) {
const [activeSection, setActiveSection] = useState("");
useEffect(() => {
const onScroll = debounce(() => {
let currentId = "";