diff --git a/index.d.ts b/index.d.ts index db01dc2..1ea5c58 100644 --- a/index.d.ts +++ b/index.d.ts @@ -153,7 +153,12 @@ declare module "@uidotdev/usehooks" { export function useDocumentTitle(title: string): void; - export function useFavicon(url: string): void; + export function useFavicon( + url: string, + options?: { + temporary?: boolean; + } + ): void; export function useGeolocation(options?: PositionOptions): GeolocationState; diff --git a/index.js b/index.js index f6e4fe2..c0e23e9 100644 --- a/index.js +++ b/index.js @@ -268,18 +268,34 @@ export function useDocumentTitle(title) { }, [title]); } -export function useFavicon(url) { +export function useFavicon(url, options = {}) { + const optionsRef = React.useRef(options); + React.useEffect(() => { let link = document.querySelector(`link[rel~="icon"]`); + let created = false; if (!link) { link = document.createElement("link"); link.type = "image/x-icon"; link.rel = "icon"; - link.href = url; document.head.appendChild(link); - } else { - link.href = url; + created = true; + } + + const original = link.href; + link.href = url; + + const { temporary } = optionsRef.current; + + if (temporary) { + return () => { + if (created) { + link.remove(); + } else { + link.href = original; + } + }; } }, [url]); } diff --git a/usehooks.com/src/content/hooks/useFavicon.mdx b/usehooks.com/src/content/hooks/useFavicon.mdx index 397022d..385d7cd 100644 --- a/usehooks.com/src/content/hooks/useFavicon.mdx +++ b/usehooks.com/src/content/hooks/useFavicon.mdx @@ -13,16 +13,17 @@ import HookDescription from "../../components/HookDescription.astro"; import StaticCodeContainer from "../../components/StaticCodeContainer.astro"; - The useFavicon hook is a useful for dynamically update the favicon (shortcut icon) of a web page. By using this hook, you can easily change the favicon by providing a new URL as a parameter. It creates a new link element with the specified URL, sets its type and relationship attributes appropriately, and appends it to the `` section of the document. + The useFavicon hook is useful for dynamically updating the favicon (shortcut icon) of a web page. By using this hook, you can easily change the favicon by providing a new URL as a parameter. It creates a new link element with the specified URL, sets its type and relationship attributes appropriately, and appends it to the `` section of the document. Optionally, you can pass `{ temporary: true }` to automatically restore the original favicon when the component unmounts.
### Parameters
- | Name | Type | Description | - | ---- | ------ | -------------------------------------------------- | - | url | string | The URL of the favicon to be set for the document. | + | Name | Type | Description | + | ------- | ------ | -------------------------------------------------- | + | url | string | The URL of the favicon to be set for the document. | + | options | object | This is an optional configuration object provided when calling `useFavicon`. It currently accepts one property `temporary` which when set to `true`, will restore the original favicon on component unmount. |