useDocumentTitle

The useDocumentTitle hook is helpful when you want to dynamically update the document title based on a current state or data.

useDocumentTitle

Count is : 0

Increment by 1**Check the document title

Usage

Import the hook from @abhushanaj/react-hooks and use in required component.

./src/App.tsx

import React from 'react';
import { useDocumentTitle } from '@abhushanaj/react-hooks';

function App() {
  const [count, setCount] = React.useState(0);
  useDocumentTitle(`Count: ${count}`);

  return (
    <div>
      <p>Count is : {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment by 1</button>
    </div>
  );
}

export default App;

With config options

./src/App.tsx

import React from 'react';
import { useDocumentTitle } from '@abhushanaj/react-hooks';

import type { UseDocumentTitleOptions } from '@abhushanaj/react-hooks';

function App() {
  const [count, setCount] = React.useState(0);

  const options: UseDocumentTitleOptions = {
    resetOnUnmount: true
  };
  useDocumentTitle(`Count: ${count}`, options);

  return (
    <div>
      <p>Count is : {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment by 1</button>
    </div>
  );
}

export default App;

API Reference

Parameters

Parameter	Type	Description	Default
title	string	The title to set for the document.	N/A
options	DocumentTitleOptions (optional)	The configuration options.	undefined

Types Reference

1. DocumentTitleOptions

Parameter	Type	Description	Default
resetOnUnmount	boolean	Whether to reset to the original title after unmount.	false