Skip to content

Instantly share code, notes, and snippets.

View its-monotype's full-sized avatar
🚀

Pavlo its-monotype

🚀
  • Worldwide
View GitHub Profile
@its-monotype
its-monotype / scroll-down-button.html
Created March 13, 2026 13:17
Scroll down button
<button className="relative flex size-9 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-white/20 bg-white/80 shadow-md backdrop-blur-md transition-all duration-200 hover:bg-white hover:shadow-lg">
<div className="pointer-events-none absolute inset-0 bg-radial-[circle] from-violet-500 to-transparent opacity-0 blur-md transition-opacity duration-300 data-[state=open]:opacity-80"></div>
<div className="relative z-10 mix-blend-luminosity">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 3a.5.5 0 0 1 .5.5v11.793l4.146-4.147a.5.5 0 0 1 .708.708l-5 5a.5.5 0 0 1-.708 0l-5-5a.5.5 0 0 1 .708-.708L9.5 15.293V3.5A.5.5 0 0 1 10 3Z" />
</svg>
</div>
</button>
@its-monotype
its-monotype / use-outside-press.ts
Created March 13, 2026 13:13
React hook that detects pointer presses outside elements to close UI like dropdowns or popovers, listening on the document and using event.composedPath() so it works across portals and Shadow DOM where event.target can be misleading due to event retargeting.
import * as React from 'react';
export function useOutsidePress(
enabled: boolean,
refs: React.RefObject<HTMLElement | null>[],
onOutsidePress: () => void,
) {
const callbackRef = React.useRef(onOutsidePress);
React.useLayoutEffect(() => {
callbackRef.current = onOutsidePress;
@its-monotype
its-monotype / omit-deep.ts
Created September 13, 2024 20:33
OmitDeep TS utility type
export type OmitDeep<T, K extends string> = T extends undefined
? undefined
: K extends `${infer Head}.${infer Tail}`
? Head extends keyof T
? {
[P in keyof T]: P extends Head ? OmitDeep<T[P], Tail> : T[P];
}
: T
: Omit<T, K>;
@its-monotype
its-monotype / withClassName.tsx
Last active December 11, 2022 17:47
withClassName React HOC (with forwardRef)
import React from 'react';
import clsx from 'clsx';
import { getDisplayName, __DEV__ } from '@/utils/helpers';
export type withClassNameProps = {
className?: string;
};
export function withClassName<T, P extends object>(
@its-monotype
its-monotype / withClassName.tsx
Created December 11, 2022 17:43
withClassName (no forwardRef)
export function withClassName<Props extends object>(
WrappedComponent:
| React.ComponentType<Props>
| React.ForwardRefExoticComponent<Props>,
classes?: string,
) {
const WithClassName = (props: Props & { className?: string }) =>
React.createElement(WrappedComponent, {
...props,
className: clsx(props.className, classes),
@its-monotype
its-monotype / parse-int-slug.pipe.ts
Created July 30, 2022 20:15
NestJS ParseIntSlugPipe. Useful when you need to get slug or id from param.
import {
ArgumentMetadata,
HttpStatus,
Injectable,
Optional,
PipeTransform
} from '@nestjs/common';
import {
ErrorHttpStatusCode,
HttpErrorByCode