feat: Add useDocumentTitle

src/index.ts

@@ -12,6 +12,8 @@ export { default as useDarkMode } from './useDarkMode/useDarkMode'
 export * from './useDarkMode/useDarkMode'
 export { default as useDebounce } from './useDebounce/useDebounce'
 export * from './useDebounce/useDebounce'
+export { default as useDocumentTitle } from './useDocumentTitle/useDocumentTitle'
+export * from './useDocumentTitle/useDocumentTitle'
 export { default as useEffectOnce } from './useEffectOnce/useEffectOnce'
 export * from './useEffectOnce/useEffectOnce'
 export { default as useElementSize } from './useElementSize/useElementSize'

src/useDocumentTitle/useDocumentTitle.demo.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { useDocumentTitle } from '..'
+
+export default function Component() {
+  useDocumentTitle('foo bar')
+}

src/useDocumentTitle/useDocumentTitle.mdx

@@ -0,0 +1,6 @@
+---
+title: useDocumentTitle
+date: '2022-09-29'
+---
+
+An easy way to set the title of the current document.

src/useDocumentTitle/useDocumentTitle.test.ts

@@ -0,0 +1,10 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom'
+
+import useDocumentTitle from './useDocumentTitle'
+
+describe('useDocumentTitle()', () => {
+  test('title should be in the document', () => {
+    renderHook(() => useDocumentTitle('foo'))
+    expect(window.document.title).toEqual('foo')
+  })
+})

src/useDocumentTitle/useDocumentTitle.ts

@@ -0,0 +1,9 @@
+import { useIsomorphicLayoutEffect } from '..'
+
+function useDocumentTitle(title: string): void {
+  useIsomorphicLayoutEffect(() => {
+    window.document.title = title
+  }, [title])
+}
+
+export default useDocumentTitle