Skip to main content
Your view runs for users on different devices and in different locales. useUser reports the user’s locale and device capabilities, so the view can format values and size controls for them.

​
Example

The carousel formats prices in the host locale and adapts its controls to the device: a touch device gets larger tap targets, and hover styles apply only when the device reports hover. 
import { useUser } from "skybridge/web";

function Carousel({ products }: { products: Product[] }) {
  const { locale, userAgent } = useUser();
  const isMobile = userAgent.device.type === "mobile";
  const canHover = userAgent.capabilities.hover;
  const isTouch = userAgent.capabilities.touch;

  const formatPrice = (amount: number) => {
    return new Intl.NumberFormat(locale, {
      style: "currency",
      currency: "USD",
    }).format(amount);
  };

  return (
    <div className={isMobile ? "grid-mobile" : "grid-desktop"}>
      {products.map((product) => (
        <article
          key={product.id}
          className={canHover ? "card card-hoverable" : "card"}
        >
          <img src={product.image} alt={product.name} />
          <p>{product.name}</p>
          <p>{formatPrice(product.price)}</p>
          <button className={isTouch ? "buy buy-large" : "buy"}>
            Add to cart
          </button>
        </article>
      ))}
    </div>
  );
}

​
Returns

​
locale

locale: string;
The user’s language and region, canonical BCP 47. The hook canonicalizes what the host reports (underscores to hyphens, casing corrected, subtags preserved) and falls back to "en-US" when the value is not a valid locale. It is safe to pass straight to Intl APIs.

​
userAgent

userAgent: UserAgent;
The host’s device class and input capabilities. 
type UserAgent = {
  device: {
    // "unknown" when the host reports no device class
    type: "mobile" | "tablet" | "desktop" | "unknown";
  };
  capabilities: {
    hover: boolean; // device supports hover interactions
    touch: boolean; // device supports touch input
  };
};

useLayout

Read the host’s theme, available height, and safe-area insets

useDisplayMode

Read and request the view’s display mode

Design for the Host

Adapt the view to the user’s device and locale