Frontend Blocks
typescript
Beginner
Dark Mode Toggle Hook
Persist dark/light preference in localStorage and sync with Tailwind dark class strategy.
typescript
import { useEffect, useState } from 'react';
export function useDarkMode() {
const [dark, setDark] = useState(
() => localStorage.getItem('theme') === 'dark'
);
useEffect(() => {
document.documentElement.classList.toggle('dark', dark);
localStorage.setItem('theme', dark ? 'dark' : 'light');
}, [dark]);
return [dark, setDark];
}Prerequisites
- React >= 17
- Tailwind CSS (darkMode: class)
Pro Tips
- → Add inline script in <head> to prevent flash.
Commercial Licensing
Acquire a production access token or template license for enterprise deployment.
Module Info
- Language
- typescript
- Level
- Beginner
- Read time
- 2 min
- Published
- Oct 2024
- License
- Commercial License
Newsletter
New modules every week, directly to your inbox.
Similar Modules
Copy to Clipboard Button
React component that copies text to clipboard and shows a Copied! confirmation.
typescript
·
Beginner
Framer Motion Fade-In Wrapper
Reusable component that fades any child element in on mount.
typescript
·
Beginner
Compound Component Pattern
Implement a flexible Tabs component using React Context and compound component pattern.
typescript
·
Intermediate