useFavicon

import { useFavicon } from '@kuzenbo/hooks';

function Demo() {
  useFavicon('/new-favicon.ico');

  return <div>Check the browser tab icon</div>;
}

function useFavicon(url: string): void

import { useFavicon } from '@kuzenbo/hooks';

function BrandedPage() {
  useFavicon('/brand-favicon.png');

  return (
    <div>
      <h1>Branded Page</h1>
    </div>
  );
}

import { useFavicon } from '@kuzenbo/hooks';
import { useColorScheme } from '@kuzenbo/hooks';

function ThemedApp() {
  const colorScheme = useColorScheme();

  useFavicon(
    colorScheme === 'dark' ? '/favicon-dark.svg' : '/favicon-light.svg'
  );

  return <div>App content</div>;
}

import { useFavicon } from '@kuzenbo/hooks';
import { useState, useEffect } from 'react';

function InboxApp() {
  const [unreadCount, setUnreadCount] = useState(0);

  useFavicon(
    unreadCount > 0 ? '/favicon-notification.png' : '/favicon.png'
  );

  return (
    <div>
      <h1>Inbox ({unreadCount})</h1>
    </div>
  );
}

import { useFavicon } from '@kuzenbo/hooks';
import { useState } from 'react';

type Status = 'online' | 'away' | 'offline';

function StatusApp() {
  const [status, setStatus] = useState<Status>('online');

  const faviconMap: Record<Status, string> = {
    online: '/favicon-online.svg',
    away: '/favicon-away.svg',
    offline: '/favicon-offline.svg',
  };

  useFavicon(faviconMap[status]);

  return (
    <div>
      <select value={status} onChange={(e) => setStatus(e.target.value as Status)}>
        <option value="online">Online</option>
        <option value="away">Away</option>
        <option value="offline">Offline</option>
      </select>
    </div>
  );
}

import { useFavicon } from '@kuzenbo/hooks';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  const faviconMap: Record<string, string> = {
    '/': '/favicon.ico',
    '/admin': '/favicon-admin.png',
    '/settings': '/favicon-settings.png',
  };

  useFavicon(faviconMap[location.pathname] || '/favicon.ico');

  return <div>{/* App routes */}</div>;
}

import { useFavicon } from '@kuzenbo/hooks';
import { useState, useEffect } from 'react';

function DataLoader() {
  const [isLoading, setIsLoading] = useState(true);

  useFavicon(isLoading ? '/favicon-loading.gif' : '/favicon.png');

  useEffect(() => {
    // Simulate data loading
    setTimeout(() => setIsLoading(false), 3000);
  }, []);

  return <div>{isLoading ? 'Loading...' : 'Data loaded'}</div>;
}

import { useFavicon } from '@kuzenbo/hooks';

function EnvironmentApp() {
  const env = process.env.NODE_ENV;

  const faviconUrl =
    env === 'production'
      ? '/favicon.ico'
      : env === 'staging'
        ? '/favicon-staging.png'
        : '/favicon-dev.png';

  useFavicon(faviconUrl);

  return <div>Environment: {env}</div>;
}