Skip to content

Instantly share code, notes, and snippets.

View ThimoDEV's full-sized avatar

Thimo ThimoDEV

  • Netherlands, Breda
  • 05:31 (UTC +02:00)
  • X @ThimoDEV
View GitHub Profile
@KristofferEriksson
KristofferEriksson / useLocation.ts
Created February 11, 2024 16:44
A React Typescript hook that provides real-time geolocation data, complete with heading and speed metrics
import { useEffect, useState } from "react";
interface LocationOptions {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
}
interface LocationState {
coords: {
@KristofferEriksson
KristofferEriksson / useTextSelection.ts
Last active February 24, 2024 22:22
A React Typescript hook that tracks user text selections & their screen positions
import { useEffect, useState } from "react";
type UseTextSelectionReturn = {
text: string;
rects: DOMRect[];
ranges: Range[];
selection: Selection | null;
};
const getRangesFromSelection = (selection: Selection): Range[] => {
@KristofferEriksson
KristofferEriksson / useShare.ts
Created February 7, 2024 22:19
A React Typescript hook that let users share your content directly via native share dialogs
import { useCallback, useEffect, useState } from "react";
// Types for the useShare hook parameters
interface UseShareParams {
onShare?: (content: ShareParams) => void;
onSuccess?: (content: ShareParams) => void;
onError?: (error: any) => void;
fallback?: () => void;
successTimeout?: number;
}
@KristofferEriksson
KristofferEriksson / useGesture.ts
Created February 7, 2024 10:27
A custom React Typescript hook for advanced touch gestures in UI
import { useEffect, useRef } from "react";
type GestureType =
| "swipeUp"
| "swipeDown"
| "swipeLeft"
| "swipeRight"
| "tap"
| "pinch"
| "zoom";
@KristofferEriksson
KristofferEriksson / useSpeechToText.ts
Last active February 20, 2024 05:33
An experimental React hook for real-time speech-to-text using the Web Speech API
import { useCallback, useEffect, useState } from "react";
// Define custom types for SpeechRecognition and SpeechRecognitionEvent
interface ISpeechRecognitionEvent extends Event {
results: SpeechRecognitionResultList;
resultIndex: number;
}
interface ISpeechRecognition extends EventTarget {
lang: string;
@KristofferEriksson
KristofferEriksson / useBroadcastChannel.ts
Created February 5, 2024 09:20
A React hook that allows you to send and receive messages between browser tabs or windows
import { useCallback, useEffect, useRef, useState } from "react";
interface UseBroadcastChannelOptions {
name: string;
onMessage?: (event: MessageEvent) => void;
onMessageError?: (event: MessageEvent) => void;
}
interface UseBroadcastChannelReturn<D, P> {
isSupported: boolean;
@KristofferEriksson
KristofferEriksson / useTailwindBreakpoint.ts
Created February 2, 2024 10:55
React hook for triggering effects when layout changes due to Tailwind breakpoints
import { useEffect, useState } from "react";
import resolveConfig from "tailwindcss/resolveConfig";
// Update the path to your Tailwind config file
import tailwindConfig from "tailwind.config";
const useTailwindBreakpoint = ({
onBreakpointChange,
}: {
// eslint-disable-next-line no-unused-vars
@KristofferEriksson
KristofferEriksson / useUndo.ts
Created January 31, 2024 11:34
A React hook that enhances your components with powerful undo/redo functionality
import { useCallback, useEffect, useRef, useState } from "react";
interface UseUndoHook<T> {
value: T;
onChange: (newValue: T) => void;
undo: () => void;
redo: () => void;
clear: () => void;
canUndo: boolean;
canRedo: boolean;
@KristofferEriksson
KristofferEriksson / useFetch.ts
Created January 29, 2024 21:27
A generic React fetch hook for API calls with caching, error handling, and refetch capability
import { useCallback, useEffect, useState } from "react";
type FetchState<T> = {
data: T | null;
isLoading: boolean;
error: Error | null;
isCached: boolean;
refetch: () => void;
};
@KristofferEriksson
KristofferEriksson / useCookie.ts
Created January 29, 2024 09:16
A hook to easily read and update browser cookies. Plus, it auto-updates your component when cookie values change
import { useEffect, useState } from "react";
type UseCookieReturnType = {
cookie: string | undefined;
setCookie: (value: string, days?: number) => void;
};
const useCookie = (cookieName: string): UseCookieReturnType => {
const getCookie = (name: string): string | undefined => {
const value = `; ${document.cookie}`;