Skip to content

Instantly share code, notes, and snippets.

@rxaviers
rxaviers / gist:7360908
Last active August 1, 2024 18:04
Complete list of github markdown emoji markup

People

:bowtie: :bowtie: 😄 :smile: 😆 :laughing:
😊 :blush: 😃 :smiley: ☺️ :relaxed:
😏 :smirk: 😍 :heart_eyes: 😘 :kissing_heart:
😚 :kissing_closed_eyes: 😳 :flushed: 😌 :relieved:
😆 :satisfied: 😁 :grin: 😉 :wink:
😜 :stuck_out_tongue_winking_eye: 😝 :stuck_out_tongue_closed_eyes: 😀 :grinning:
😗 :kissing: 😙 :kissing_smiling_eyes: 😛 :stuck_out_tongue:
@KristofferEriksson
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
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
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
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",
];