From 16c9d5ae5b5002bed2f2a36874018b1f45a31a91 Mon Sep 17 00:00:00 2001
From: Viki <hi@viki.moe>
Date: Fri, 21 Jun 2024 15:11:36 +0800
Subject: [PATCH] feat(useTitle): support gettable title in SSR

---
 src/use-title/index.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/use-title/index.ts b/src/use-title/index.ts
index 8ba05fbd..f81afd49 100644
--- a/src/use-title/index.ts
+++ b/src/use-title/index.ts
@@ -1,4 +1,3 @@
-import { useCreation } from '@shined/react-use'
 import { useDeepCompareEffect } from '../use-deep-compare-effect'
 import { useGetterRef } from '../use-getter-ref'
 import { useLatest } from '../use-latest'
@@ -6,6 +5,9 @@ import { useMount } from '../use-mount'
 import { useStableFn } from '../use-stable-fn'
 import { useUnmount } from '../use-unmount'
 import { isFunction } from '../utils/basic'
+import { unwrapGettable } from '../utils/unwrap'
+
+import type { Gettable } from '../utils/basic'
 
 /**
  * `%s` will be replaced by the title if the template is a `string`
@@ -27,19 +29,20 @@ export type UseTitleOptions = {
   template?: UseTitleTemplate
 }
 
-export function useTitle(newTitle: string, options: UseTitleOptions = {}) {
+export function useTitle(newTitle: Gettable<string>, options: UseTitleOptions = {}) {
   const [originalTitleRef, originalTitle] = useGetterRef('')
   const { template = '%s', restoreOnUnmount = false } = options
 
   const latest = useLatest({ template, restoreOnUnmount })
+  const nextTitle = unwrapGettable(newTitle)
 
   useMount(() => {
     originalTitleRef.current = document.title
   })
 
   useDeepCompareEffect(() => {
-    document.title = format(newTitle, latest.current.template)
-  }, [newTitle])
+    document.title = format(nextTitle, latest.current.template)
+  }, [nextTitle])
 
   const restore = useStableFn(() => {
     document.title = originalTitle()