diff --git a/src/index.ts b/src/index.ts index c94fdb4a..b3479d56 100644 --- a/src/index.ts +++ b/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' diff --git a/src/useDocumentTitle/useDocumentTitle.demo.tsx b/src/useDocumentTitle/useDocumentTitle.demo.tsx new file mode 100644 index 00000000..d6238a84 --- /dev/null +++ b/src/useDocumentTitle/useDocumentTitle.demo.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +import { useDocumentTitle } from '..' + +export default function Component() { + useDocumentTitle('foo bar') +} diff --git a/src/useDocumentTitle/useDocumentTitle.mdx b/src/useDocumentTitle/useDocumentTitle.mdx new file mode 100644 index 00000000..4c4172b9 --- /dev/null +++ b/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. diff --git a/src/useDocumentTitle/useDocumentTitle.test.ts b/src/useDocumentTitle/useDocumentTitle.test.ts new file mode 100644 index 00000000..a38167fc --- /dev/null +++ b/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') + }) +}) diff --git a/src/useDocumentTitle/useDocumentTitle.ts b/src/useDocumentTitle/useDocumentTitle.ts new file mode 100644 index 00000000..7b4bcb3f --- /dev/null +++ b/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