Crea una captura de código compartible de un hook de React con resaltado de sintaxis, tema personalizable y marco de ventana. Funciona en tu navegador.
Loading editor...
1import { useState, useCallback } from 'react';2 3export function useLocalStorage<T>(key: string, initialValue: T) {4 const [storedValue, setStoredValue] = useState<T>(() => {5 try {6 const item = window.localStorage.getItem(key);7 return item ? JSON.parse(item) : initialValue;8 } catch (error) {9 console.error('Error reading localStorage:', error);10 return initialValue;11 }12 });13 14 const setValue = useCallback((value: T | ((val: T) => T)) => {15 try {16 const valueToStore = value instanceof Function ? value(storedValue) : value;17 setStoredValue(valueToStore);18 window.localStorage.setItem(key, JSON.stringify(valueToStore));19 } catch (error) {20 console.error('Error setting localStorage:', error);21 }22 }, [key, storedValue]);23 24 return [storedValue, setValue] as const;25}Este ejemplo muestra un hook personalizado useLocalStorage renderizado como una captura de código compartible. El hook maneja la lectura y escritura en localStorage con manejo de errores, usando hooks de React para la gestión de estado.
La captura usa el tema Monokai con fuente JetBrains Mono, ventana macOS y números de línea habilitados. Esta combinación produce imágenes limpias y legibles que funcionan bien en feeds oscuros de redes sociales.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.