Kristoffer Eriksson KristofferEriksson

KristofferEriksson / useNetwork.ts

Created February 13, 2024 22:04

A React Typescript hook to get real-time network insights

	import { useEffect, useState } from "react";

	interface NetworkInformation extends EventTarget {
	downlink?: number;
	effectiveType?: "slow-2g" \| "2g" \| "3g" \| "4g";
	rtt?: number;
	saveData?: boolean;
	onchange?: EventListener;
	}

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

	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 / useDebounce.ts

Created February 13, 2024 14:14

A React Typescript hook that allows you to debounce any fast changing value

	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 / 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 / useTextSelection.ts

Last active March 24, 2025 14:37

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 / 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 / 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 / useSpeechToText.ts

Last active June 22, 2025 11:57

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 / 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 / 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