Skip to content

Instantly share code, notes, and snippets.

View moritzsalla's full-sized avatar

Moritz Salla moritzsalla

View GitHub Profile
import { useTransform, type MotionValue } from "framer-motion";
/**
* @see https://www.framer.com/motion/scroll-animations/##parallax
*
* ```tsx
* const Image = ({ id }: { id: number }) => {
* const ref = useRef(null);
* const { scrollYProgress } = useScroll({ target: ref });
* const y = useParallax(scrollYProgress, 300);
@moritzsalla
moritzsalla / HistoryObserver.tsx
Created April 5, 2024 14:48
Simple history observer that listens to pathname & popstate events
"use client";
import { createContext, useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
const MAX_HISTORY_LENGTH = 10;
type HistoryObserver = {
history: Array<string>;
referrer?: string;
@moritzsalla
moritzsalla / Collapsible.module.scss
Created March 18, 2024 16:15
Collapsible primitive
@use "styles/includes.module" as *;
.trigger {
cursor: pointer;
}
.content {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
@moritzsalla
moritzsalla / Modal.module.scss
Last active February 13, 2024 21:12
HTML modal bezier
@use "styles/includes.module" as *;
:global(::backdrop) {
background: #{rgba(colors.$black, 0.5)};
}
.root {
--modal-margin: 0.5rem;
min-width: 100%;
import { createContext } from "react";
import { useSafeContext } from "hooks/useSafeContext";
type RootElem = React.RefObject<HTMLElement>;
const RootElementContext = createContext<RootElem | undefined>(undefined);
RootElementContext.displayName = "RootElementContext";
type RootElementProviderProps = {
@moritzsalla
moritzsalla / concurrent-fetch.test.ts
Created September 5, 2023 15:56
concurrent-fetch
import { suppressConsoleLogs } from "test/utils/suppressConsoleLogs";
import { concurrentFetch } from "./concurrentFetch";
describe("concurrentFetch", () => {
it(
"should return an array of resolved values",
suppressConsoleLogs(async () => {
const result = await concurrentFetch(
Promise.resolve("value1"),
const TIMEOUT_DURATION_MS = 3000;
/**
* Fetches a resource with a timeout.
*
* @param input - The resource to fetch.
* @param init - The options for the fetch.
* @param timeoutDuration - The timeout duration in milliseconds.
*
* @returns A promise that resolves to the response of the fetch.
import { useEffect, useRef } from "react";
/**
* A React hook that returns true if the component is being rendered for the first time.
*
* @returns boolean
* @example
* ```tsx
* import { useIsInitialRender } from "hooks/useIsInitialRender";
*
const FocusDemo = () => {
// with callback
const [inputRef, setInputFocus] = useFocus<HTMLInputElement>();
// on component mount
const ref = useAutoFocus<HTMLInputElement>();
return (
<>
<button onClick={setInputFocus} >
@moritzsalla
moritzsalla / test.yml
Created August 2, 2023 16:01
Github action - Unit test
name: Tests
on:
pull_request:
jobs:
Unit:
runs-on: ubuntu-latest
strategy: