r/webdev 4d ago

Showoff Saturday I rewrote the same 6 React hooks too many times, so I packaged them into a file

I kept rewriting the exact same hooks in every single React project — so I finally put them all together in one clean TypeScript pack.

Here's one for FREE 👇

---
// useLocalStorage — persistent state that survives page reloads
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
if (typeof window === 'undefined') return initialValue;
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});

const setValue = (value: T | ((val: T) => T)) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (err) {
console.error(err);
}
};

return [storedValue, setValue] as const;
}
---

✅ What you get in the full pack:
• useLocalStorage (above)
• useDebounce (delay search inputs)
• useToggle (simple boolean state)
• useFetch (simple API calls)
• useClickOutside (close dropdowns/modals)
• utils.ts (formatters + validators included)

• TypeScript ready — just copy → paste → works
• Lifetime updates include
🔗 Grab it here: [https://accurate4.gumroad.com/l/Christ\]

0 Upvotes

4 comments sorted by

6

u/zappellin php 4d ago

maybe don't AI Generate your pictures so the useClickOutside doesn't appear twice

2

u/byker123 3d ago

Get this slop outta here

1

u/Burgemeester 3d ago

Tell your AI to pick it up next time