useDocumentTitle

Gain control over your page title.

Installation

npx rabbithook@latest add use-document-title

Usage

App.tsx

  import useDocumentTitle from "@/hooks/use-document-title";

  function Component() {
    const { title, setTitle } = useDocumentTitle();

    return (
      <>
        <p>Current title: { title }</p>
        <button onClick={() => setTitle("New Title!")}>
          Update title
        </button>
      </>
    )
  }

Code

Typescript

use-document-title.ts

import { useEffect, useState } from "react";

type useDocumentTitle = [
  string,
  React.Dispatch<React.SetStateAction<string>>
]
function useDocumentTitle(initialTitle?: string):useDocumentTitle {
  const [title, setTitle] = useState(initialTitle || document.title);

  useEffect(() => {
    document.title = title;
  }, [title]);

  return [
    title,
    setTitle,
  ];
}

export default useDocumentTitle;

Javascript

use-document-title.js

import { useEffect, useState } from "react";

function useDocumentTitle(initialTitle) {
  const [title, setTitle] = useState(initialTitle || document.title);

  useEffect(() => {
    document.title = title;
  }, [title]);

  return [
    title,
    setTitle,
  ];
}

export default useDocumentTitle;