Skip to content
Twilight React Playground
ثيم رائدaren

useIsHome, useIsProduct…

hookBeginnerserverbrowserlive demo

Seven yes-or-no hooks that tell a component which kind of store page is showing: home, product, cart, account, blog, brands or search.

import { useIsHome, useIsProduct, useIsCart, useIsCustomer, useIsBlog, useIsBrands, useIsSearch } from '@salla.sa/twilight-theme-engine';

In plain words

Headers and banners often behave differently on one kind of page: a transparent header on the home page, no cart button on the cart page. Each of these hooks answers one question with true or false, and your component updates by itself when the shopper moves to another page.

Signature

function useIsHome(): boolean       // routeId === 'index'
function useIsProduct(): boolean    // routeId === 'product.single'
function useIsCart(): boolean       // routeId === 'cart'
function useIsSearch(): boolean     // routeId === 'product.index.search'
function useIsBlog(): boolean       // 'blog.index' or 'blog.single'
function useIsBrands(): boolean     // 'brands.index' or 'brands.single'
function useIsCustomer(): boolean   // routeId.startsWith('customer')

Try it live

All seven page-detection hooks, answered for the page you are reading. Each is true on one kind of store page.Try this: pick a hook to outline it and see a typical use. On this documentation page every lamp is off.
Storefront canvas · en · LTR
Runs in the browser…
Controls
What a theme writes
import { useIsHome } from '@salla.sa/twilight-theme-engine';

export function Example() {
  const isHome = useIsHome();
  return <header className={isHome ? 'header--transparent' : 'header--solid'}>…</header>;
}

Example

app/components/HeaderActions.tsx
import { useIsCart, useIsHome } from '@salla.sa/twilight-theme-engine';

export function HeaderActions() {
  const isHome = useIsHome();
  const isCart = useIsCart();
  return (
    <div className={isHome ? 'header-actions header-actions--transparent' : 'header-actions'}>
      {!isCart && <a href="#mini-cart">Cart</a>}
    </div>
  );
}

How it behaves

  • Each is useRouteId() plus one comparison, so each subscribes to route changes and renders again after a navigation.

  • Category, offers, latest-products and tag listings are not useIsProduct(); compare useRouteId() with the RouteId.PRODUCT_INDEX… constants. Blog author, category and tag listings are not useIsBlog().

  • All seven are also exported from /providers.

Gotchas

  • useIsCustomer() is false on the engine's generated account pages (/account/profile, /account/orders…). Their router ids are /{-$locale}/account/…, but the id table (TANSTACK_ROUTE_ID_MAP in src/tanstack/router.tsx) lists /{-$locale}/profile and /{-$locale}/orders, so the raw router id comes back and never starts with customer. Until the engine maps them, also test useRouteId().includes('/account').

  • On the server the route id is written only by the route class sync, which TwilightProvider loads lazily and mounts only while routeClass is true (src/tanstack/document-class.ts). With routeClass={false} these hooks are false in the server render and correct in the browser, a hydration mismatch. For a server-critical choice such as a layout, read the router matches (useMatches from @tanstack/react-router).

Related

useRouteId

Returns the id of the page on screen, such as "cart" or "product.single", and renders the component again when the shopper navigates.

RouteId

The named list of every engine page id, so code compares with RouteId.CART instead of typing the string "cart".

Source and docs