Kristoffer Eriksson 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 / 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 / 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}`;

KristofferEriksson / useMeasure.ts

Created January 27, 2024 16:52

A generic React TypeScript hook for measuring element dimensions in real-time

	import { useEffect, useRef, useState } from "react";

	interface MeasureResult<T extends Element> {
	ref: React.RefObject<T>;
	bounds: DOMRectReadOnly;
	}

	const useMeasure = <T extends Element = Element>(): MeasureResult<T> => {
	const ref = useRef<T>(null);
	const [bounds, setBounds] = useState<DOMRectReadOnly>(new DOMRectReadOnly());

KristofferEriksson / useLocalStorage.ts

Last active July 25, 2024 19:33

An easy-to-use API for storing and retrieving data from Local Storage in React, with built-in real-time synchronization

	import { useEffect, useState } from "react";

	function useLocalStorage() {
	const [loadingStates, setLoadingStates] = useState<Map<string, boolean>>(
	new Map()
	);

	const setStorageValue = <T>(key: string, value: T) => {
	try {
	window.localStorage.setItem(key, JSON.stringify(value));

KristofferEriksson / useIdle.ts

Created January 25, 2024 10:26

React Hook to detect user inactivity based on specified events like mouse movements, touch events or key presses

	import { useEffect, useState } from "react";

	const defaultEvents = [
	"mousemove",
	"mousedown",
	"touchstart",
	"keydown",
	"wheel",
	"resize",
	];

KristofferEriksson / useLongPress.ts

Created January 24, 2024 11:05

A simple useLongPress hook for React

	import { useCallback, useEffect, useRef } from "react";

	export function useLongPress({
	delay,
	onLongPress,
	onClick,
	onCancel,
	onFinish,
	onStart,
	}: {

KristofferEriksson / useConfirmation.ts

Created January 23, 2024 10:11

Custom React hook for double-click confirmation for critical actions

	import { useCallback, useEffect, useRef, useState } from "react";

	/**
	* Custom React hook for double-click confirmation for critical actions.
	*
	* @param action - The action to be executed on the second click.
	* @param timeout - Time in milliseconds to reset the unlocked state.
	* @returns The current unlocked state and the trigger function.
	*/
	const useConfirmation = (action: () => void, timeout: number = 5000) => {

KristofferEriksson / use-copy-to-clipboard.ts

Created January 22, 2024 11:32

Custom React hook for effortless text copying to clipboard! It handles copy status with a customizable timer and error management.

	import { useCallback, useState } from "react";

	// Custom hook to copy text to clipboard
	const useCopyToClipboard = (timeoutDuration: number = 1000) => {
	const [copied, setCopied] = useState(false);
	const [error, setError] = useState<Error \| null>(null);

	const copyToClipboard = useCallback(
	async (text: string) => {
	try {

KristofferEriksson / useKeypress.ts

Last active March 24, 2025 14:38

A React custom hook for handling keyboard events.