useDocumentTitle
Dynamically update the title of a webpage with useDocumentTitle.
Install:
npm i @uidotdev/usehooks
Description:
The useDocumentTitle hook is useful for dynamically updating the title of a webpage based on the current state or data. This hook proves beneficial in scenarios where the title needs to be dynamically updated, such as displaying the name of the currently selected item or reflecting changes in application state.
Parameters
| Name | Type | Description |
|---|---|---|
| title | string | The title to be set for the document. |
Demo:
Example:
import * as React from "react";
import { useDocumentTitle } from "@uidotdev/usehooks";
export default function App() {
const [count, setCount] = React.useState(0);
useDocumentTitle(`Clicked ${count} times.`);
return (
<section>
<h1>useDocumentTitle</h1>
<h6>
<a
className="link"
href="https://6vmc1n.csb.app/"
target="_blank"
rel="noreferrer"
>
Try in a new tab
</a>
</h6>
<button className="primary" onClick={() => setCount(count + 1)}>
Increment Count: {count}
</button>
</section>
);
}