T
TanStack•4w ago
rare-sapphire

Getting headers inside of an SSR component

import { useEffect, useState } from "react";

export function useShortcutKey() {
  const [shortcutKey, setShortcutKey] = useState("Ctrl");

  useEffect(() => {
    const isMacOs = !!navigator?.userAgent?.match(/Macintosh;/);
    setShortcutKey(isMacOs ? "⌘" : "Ctrl");
  }, []);

  return shortcutKey;
}
import { useEffect, useState } from "react";

export function useShortcutKey() {
  const [shortcutKey, setShortcutKey] = useState("Ctrl");

  useEffect(() => {
    const isMacOs = !!navigator?.userAgent?.match(/Macintosh;/);
    setShortcutKey(isMacOs ? "⌘" : "Ctrl");
  }, []);

  return shortcutKey;
}
is there a way to support this as an ssr component?
2 Replies
robust-apricot
robust-apricot•4w ago
You can get user agent from request header from the server 
import { createIsomorphicFn } from '@tanstack/react-start';

const getUserAgent = createIsomorphicFn()
  .client(() => navigator.userAgent)
  .server(() => getRequestHeader("user-agent"))

export function useShortcutKey() {
  const [userAgent] = useState(getUserAgent);

  return !!userAgent?.match(/Macintosh;/) ? "⌘" : "Ctrl";
}
import { createIsomorphicFn } from '@tanstack/react-start';

const getUserAgent = createIsomorphicFn()
  .client(() => navigator.userAgent)
  .server(() => getRequestHeader("user-agent"))

export function useShortcutKey() {
  const [userAgent] = useState(getUserAgent);

  return !!userAgent?.match(/Macintosh;/) ? "⌘" : "Ctrl";
}
pardon me, I missed putting import { getRequestHeader } from '@tanstack/react-start/server' in my code
rare-sapphire
rare-sapphireOP•4w ago
thanks you! thats a great help

Did you find this page helpful?