W
Wasp•4d ago
Sven

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"
1 Reply
kapa.ai
kapa.ai•4d ago
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?

Did you find this page helpful?