React özel hook'unu sözdizimi vurgulama ve macOS pencere chrome ile paylaşılabilir bir kod ekran görüntüsü oluşturun. Tema ve font seçimi mevcut.
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}Bu örnek, paylaşılabilir bir kod ekran görüntüsü olarak render edilmiş bir useLocalStorage özel hook’unu gösterir. Hook, React hook’ları kullanarak durum yönetimi ile hata işleme ile localStorage’ye okuma ve yazma işlemini yönetir.
Ekran görüntüsü, macOS pencere chrome ve satır numaraları etkinleştirilmiş Monokai teması ve JetBrains Mono fontu kullanır. Bu kombinasyon, koyu sosyal medya akışlarında iyi çalışan temiz, okunabilir görüntüler üretir.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.