Wasp•4w ago

Change tab title to what page user is on

how do i change tab title to what page the user is on? for example "SaaS - Dasboard"

11 Replies

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the tab title dynamically based on the current page in a Wasp application, you have a few options: Using the Root Component The most flexible approach is to use Wasp's root component feature to set up a custom title management system: 1. First, set up a root component in your main.wasp file:

app MyApp {
  title: "My App", // Default title
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

app MyApp {
  title: "My App", // Default title
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

2. Then implement your Root component with title management:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function Root({ children }) {
  const location = useLocation();
  
  useEffect(() => {
    // Change title based on current path
    if (location.pathname === '/dashboard') {
      document.title = 'SaaS - Dashboard';
    } else if (location.pathname === '/profile') {
      document.title = 'SaaS - Profile';
    } else {
      document.title = 'SaaS'; // Default title
    }
  }, [location]);

  return <>{children}</>;
}

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function Root({ children }) {
  const location = useLocation();
  
  useEffect(() => {
    // Change title based on current path
    if (location.pathname === '/dashboard') {
      document.title = 'SaaS - Dashboard';
    } else if (location.pathname === '/profile') {
      document.title = 'SaaS - Profile';
    } else {
      document.title = 'SaaS'; // Default title
    }
  }, [location]);

  return <>{children}</>;
}

This approach uses the root component to wrap your entire application and update the document title whenever the location changes. The root component is a perfect place for this kind of functionality as explained in the Client Config documentation. Alternative: Page-specific Title Updates You can also update the title directly in each page component:

import { useEffect } from 'react';

export const DashboardPage = () => {
  useEffect(() => {
    document.title = 'SaaS - Dashboard';
    // Clean up when component unmounts
    return () => {
      document.title = 'SaaS';
    };
  }, []);
  
  return <div>Dashboard content...</div>;
};

import { useEffect } from 'react';

export const DashboardPage = () => {
  useEffect(() => {
    document.title = 'SaaS - Dashboard';
    // Clean up when component unmounts
    return () => {
      document.title = 'SaaS';
    };
  }, []);
  
  return <div>Dashboard content...</div>;
};

This approach works well if you have a small number of pages and prefer to keep the title logic with each page component. Choose the approach that best fits your application structure and complexity. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Vinny (@Wasp)•4w ago

Oh i've never thought about this actually. Did this work @Sven? Maybe @toticozeni can take a look at this and chime in.

SvenOP•4w ago

It worked

toticozeni•4w ago

Oh, it looks like we are missing title property for page. We should definitely open an issue for that. The suggested Root solution works, but I would do something like this, it should be easier to maintain:

const = pathnameToTitle = {
  routes.DashboardPage.to: 'SaaS - Dashboard',
  // ...
};

export default function Root({ children }) {
  const location = useLocation();
  
  useEffect(() => {
    const title = pathnameToTitle[location.pathname];
    if (title) document.title = title;
  }, [location]);

  return <>{children}</>;
}

const = pathnameToTitle = {
  routes.DashboardPage.to: 'SaaS - Dashboard',
  // ...
};

export default function Root({ children }) {
  const location = useLocation();
  
  useEffect(() => {
    const title = pathnameToTitle[location.pathname];
    if (title) document.title = title;
  }, [location]);

  return <>{children}</>;
}

The problem with Root approach is that we need to manually update the object each time we add another page. But it's less work than doing useEffect on each Page. EDIT: added Vinny's suggestion

SvenOP•4w ago

So i have ti update manyally for each page?

toticozeni•4w ago

Do it for every page in Root or do it manually on each page. Both work.

NEROX•4w ago

we have also the react-helmet-async solution

Vinny (@Wasp)•4w ago

You could also make it more typesafe by using Wasp routes. It will pull the path you defined in your wasp file. Also nice if you decided to change it later, you won't have to change it in other places in your code:

import { routes } from 'wasp/client/router';

const = pathnameToTitle = {
  routes.DashboardPage.to: 'SaaS - Dashboard', // use the name you defined in your main.wasp file
  // ...
};

import { routes } from 'wasp/client/router';

const = pathnameToTitle = {
  routes.DashboardPage.to: 'SaaS - Dashboard', // use the name you defined in your main.wasp file
  // ...
};

NEROX•4w ago

woah, since when is this possible?

Vinny (@Wasp)•4w ago

we've had typesafe routes for a long time 🙂

toticozeni•4w ago

This would probably be the most scalable solution longterm.

Gaming

Programming

Change tab title to what page user is on

Did you find this page helpful?