// Dynamically change page favicon based on state
const { setFavicon, setFaviconByStatus } = useFavicon();Ideal for showing notification counts, connection status, app state indicators, or any visual feedback in the browser tab.
Change the page favicon to indicate different states. Look at your browser tab to see the changes!
Pro tip:
In a real application, you could use this to show notification counts, connection status, or any other dynamic state in the browser tab.
import { useFavicon } from '@usegrand/react-hokss';
function AppWithStatusFavicon() {
const { setFaviconByStatus, setFavicon, restoreOriginal } = useFavicon({
baseUrl: '/favicons/status',
extension: '.png'
});
const handleStatusChange = (status: string) => {
setFaviconByStatus(status); // loads /favicons/status-online.png
};
const handleNotification = () => {
setFavicon('/favicons/notification.png');
};
return (
<div>
<button onClick={() => handleStatusChange('online')}>
Set Online
</button>
<button onClick={handleNotification}>
Show Notification
</button>
<button onClick={restoreOriginal}>
Restore Original
</button>
</div>
);
}Configuration options for favicon management
Base URL for favicon files (default: '/favicon')
File extension for favicon files (default: '.ico')
Whether to restore original favicon on unmount (default: true)
Object containing favicon control functions
Function to set favicon to a specific URL
Function to set favicon based on status string
Function to restore the original favicon
Function to get the current favicon URL