Custom Hook Examples

// Custom Hook
function useWindowSize() {
  const [size, setSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  React.useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

// Using the Hook
function App() {
  const { width, height } = useWindowSize();
  const isMobile = width < 768;

  return (
    <div className="container">
      <h1>📐 Window Size Tracker</h1>

      <div className="size-display">
        <div className="stat">
          <div className="stat-value">{width}px</div>
          <div className="stat-label">Width</div>
        </div>
        <div className="stat">
          <div className="stat-value">{height}px</div>
          <div className="stat-label">Height</div>
        </div>
      </div>

      <div className={`device-type ${isMobile ? 'mobile' : 'desktop'}`}>
        <h3>{isMobile ? '📱 Mobile' : '💻 Desktop'} View</h3>
        <p>
          {isMobile 
            ? 'You are viewing this on a mobile device' 
            : 'You are viewing this on a desktop'}
        </p>
      </div>

      <div className="info">
        💡 Resize your window to see changes!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// Custom Hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = React.useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// Using the Hook
function App() {
  const [name, setName] = useLocalStorage('name', '');
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [count, setCount] = useLocalStorage('count', 0);

  return (
    <div className={`container ${theme === 'dark' ? 'dark-theme' : ''}`}>
      <h1>💾 Persistent Storage</h1>

      <div className="section">
        <h3>Your Name</h3>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
          className="input"
        />
        {name && <p className="saved">Saved: {name}</p>}
      </div>

      <div className="section">
        <h3>Theme</h3>
        <button 
          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
          className="btn-primary"
        >
          Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
        </button>
      </div>

      <div className="section">
        <h3>Counter</h3>
        <div className="counter-display">{count}</div>
        <button onClick={() => setCount(count + 1)} className="btn-primary">
          Increment
        </button>
      </div>

      <div className="info">
        💡 Refresh the page - your data persists!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);