Crie uma captura de código compartilhável de um hook personalizado do React com destaque de sintaxe, moldura de janela macOS e tema de cores personalizado.
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 exemplo mostra um hook personalizado useLocalStorage renderizado como uma captura de código compartilhável. O hook lida com leitura e escrita no localStorage com tratamento de erros, usando hooks do React para gerenciamento de estado.
A captura usa o tema Monokai com fonte JetBrains Mono, janela macOS e números de linha habilitados. Esta combinação produz imagens limpas e legíveis que funcionam bem em feeds escuros de redes sociais.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.