UseWindowTitle

Last updated: 3.0.0 (04/07/2024)

useWindowTitle is a hook that sets the browser window/tab title. This is useful for dynamically updating the page title based on the current view or state.

Usage

import { UseWindowTitle, Text } from "@valence-ui/core";

function MyComponent() { 
    UseWindowTitle("My Page Title");
    
    return ( 
        <Text>
            Check the browser tab!
        </Text>
    )
}

Dynamic titles

The title will update whenever the value passed to the hook changes:

import { UseWindowTitle, Text } from "@valence-ui/core";
import { useState } from "react";

function MyComponent() { 
    const [count, setCount] = useState(0);
    
    UseWindowTitle(`Count: ${count}`);
    
    return ( 
        <Text>
            The tab title shows the current count!
        </Text>
    )
}

Page-specific titles

This hook is particularly useful when combined with routing to set page-specific titles:

import { UseWindowTitle } from "@valence-ui/core";

function HomePage() { 
    UseWindowTitle("Home | My App");
    
    return (
        // Page content...
    )
}

function AboutPage() { 
    UseWindowTitle("About | My App");
    
    return (
        // Page content...
    )
}

Parameters

Parameter	Type	Description
title (required)	string	The title to set for the browser window.