DevBentoCode Screenshot for React Hook
Create a shareable code screenshot of a React custom hook with syntax highlighting and macOS window chrome styling. Ready to post on social media or docs.
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}Code Screenshot for React Hook
This example shows a useLocalStorage custom hook rendered as a shareable code screenshot. The hook handles reading from and writing to localStorage with error handling, using React hooks for state management.
The screenshot uses Monokai theme with JetBrains Mono font, macOS window chrome, and line numbers enabled. This combination produces clean, readable images that work well on dark social media feeds.
How to Use
- The code is pre-filled with a production-ready
useLocalStoragehook - Adjust the theme, font, or window style using the controls below the editor
- Click Copy to clipboard to paste directly into Slack, Discord, or Twitter
- Or click Download PNG to save the image file
Common Questions
Why use code screenshots instead of code blocks?
Code screenshots render consistently across every platform. Markdown code blocks look different on Twitter, LinkedIn, Slack, and Discord. A screenshot gives you pixel-perfect control over fonts, colors, and spacing, and the image renders the same everywhere.
Can I include line numbers in the screenshot?
Yes. The Line numbers checkbox in the bottom controls toggles line numbering. Line numbers are useful for referencing specific lines when discussing code in blog posts or documentation.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.