Skip to content

Instantly share code, notes, and snippets.

View KristofferEriksson's full-sized avatar

Kristoffer Eriksson KristofferEriksson

View GitHub Profile
@KristofferEriksson
KristofferEriksson / useNetwork.ts
Created February 13, 2024 22:04
A React Typescript hook to get real-time network insights
View useNetwork.ts
import { useEffect, useState } from "react";
interface NetworkInformation extends EventTarget {
downlink?: number;
effectiveType?: "slow-2g" | "2g" | "3g" | "4g";
rtt?: number;
saveData?: boolean;
onchange?: EventListener;
}
@KristofferEriksson
KristofferEriksson / useDeviceOrientation.ts
Created February 13, 2024 15:10
A React Typescript hook that utilizes the DeviceOrientation API to provide real-time orientation data of a device in 3D space
View useDeviceOrientation.ts
import { useCallback, useEffect, useState } from "react";
interface DeviceOrientationState {
alpha: number | null;
beta: number | null;
gamma: number | null;
absolute: boolean;
}
// Define an extended interface for DeviceOrientationEvent including requestPermission
@KristofferEriksson
KristofferEriksson / useDebounce.ts
Created February 13, 2024 14:14
A React Typescript hook that allows you to debounce any fast changing value
View useDebounce.ts
import { useEffect, useState } from "react";
/**
* useDebounce hook
* This hook allows you to debounce any fast changing value. The debounced value will only
* reflect the latest value when the useDebounce hook has not been called for the specified delay period.
*
* @param value - The value to be debounced.
* @param delay - The delay in milliseconds for the debounce.
* @returns The debounced value.
@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
View useLocation.ts
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
View useTextSelection.ts
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
View useShare.ts
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
View useGesture.ts
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
View useSpeechToText.ts
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
View useBroadcastChannel.ts
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
View useTailwindBreakpoint.ts
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