feat: return restore in useTitle

src/use-title/demo.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, Input, Zone } from '@/components'
 import { useControlledComponent } from '@shined/react-use'
-import { useMount, useTitle, useToggle } from '@shined/react-use'
+import { useTitle, useToggle } from '@shined/react-use'
 
 export function App() {
   const [show, toggle] = useToggle(true)
@@ -14,23 +14,16 @@ export function App() {
 }
 
 function Child() {
-  const input = useControlledComponent('')
+  const input = useControlledComponent('useTitle')
 
-  const initialTitle = useTitle(input.value, {
+  useTitle(input.value, {
     template: '🌟 %s 🌟',
     restoreOnUnmount: true,
   })
 
-  useMount(() => input.setValue(initialTitle()))
-
-  function resetTitle() {
-    document.title = initialTitle()
-  }
-
   return (
     <Zone border="primary">
       <Input placeholder="Title" {...input.props} />
-      <Button onClick={resetTitle}>Reset title</Button>
     </Zone>
   )
 }

src/use-title/index.mdx

@@ -61,8 +61,4 @@ export type UseTitleOptions = {
 
 ### Returns
 
-import { Tip } from '@/components'
-
-<Tip type="ref-getter" name="initialTitle" />
-
-A Ref Getter that returns the current title of the document.
+A function to restore to the original title.

src/use-title/index.ts

@@ -1,5 +1,6 @@
-import { useRef } from 'react'
+import { useCreation } from '@shined/react-use'
 import { useDeepCompareEffect } from '../use-deep-compare-effect'
+import { useGetterRef } from '../use-getter-ref'
 import { useLatest } from '../use-latest'
 import { useMount } from '../use-mount'
 import { useStableFn } from '../use-stable-fn'
@@ -26,22 +27,22 @@ export type UseTitleOptions = {
   template?: UseTitleTemplate
 }
 
-export function useTitle(newTitle: string, options: UseTitleOptions = {}): () => string {
-  const initialTitle = useRef('')
+export function useTitle(newTitle: string, options: UseTitleOptions = {}) {
+  const [originalTitleRef, originalTitle] = useGetterRef('')
   const { template = '%s', restoreOnUnmount = false } = options
 
   const latest = useLatest({ template, restoreOnUnmount })
 
   useMount(() => {
-    initialTitle.current = document.title
+    originalTitleRef.current = document.title
   })
 
   useDeepCompareEffect(() => {
     document.title = format(newTitle, latest.current.template)
   }, [newTitle])
 
   const restore = useStableFn(() => {
-    document.title = initialTitle.current
+    document.title = originalTitle()
   })
 
   useUnmount(() => {
@@ -50,7 +51,7 @@ export function useTitle(newTitle: string, options: UseTitleOptions = {}): () =>
     }
   })
 
-  return useStableFn(() => initialTitle.current)
+  return restore
 }
 
 function format(text: string, template: UseTitleTemplate) {