DevBento logoDevBento
Ferramentas/Code Screenshot Generator/Captura de Tela de Código para React Hook

Captura de Tela de Código para React Hook

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...

main.ts
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}
Background
Size
Window
Font size14px
Watermark
Ferramentas Relacionadas
{ }Editor Online de Diagramas Mermaid
Diagram your code flow before screenshotting
{}Formatador e Validador de JSON
Clean up JSON output for screenshot
</>Formatador de SQL / CSS / HTML
Formaté e minifique consultas SQL, folhas de estilo CSS e markup HTML com realce de sintaxe. Indente, embeleze ou comprima código no seu navegador.

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.

© 2026 devbento.dev · construído localmenteChangelog