Erstellen Sie einen teilbaren Code-Screenshot eines benutzerdefinierten React-Hooks mit Syntaxhervorhebung und macOS-Fenster-Chrome.
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}Dieses Beispiel zeigt einen benutzerdefinierten useLocalStorage-Hook, der als teilbarer Code-Screenshot gerendert wird. Der Hook behandelt das Lesen und Schreiben in localStorage mit Fehlerbehandlung und verwendet React-Hooks für die Zustandsverwaltung.
Der Screenshot verwendet das Monokai-Thema mit JetBrains Mono-Font, macOS-Fenster-Chrome und aktivierten Zeilennummern. Diese Kombination erzeugt saubere, lesbare Bilder, die in dunklen Social-Media-Feeds gut funktionieren.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.