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

useStore

hookBeginnerserverbrowserlive demo

Reads the current store (name, logo, settings, contacts…) and can refresh it from the Salla SDK.

import { useStore, UseStoreResult } from '@salla.sa/twilight-theme-engine/hooks/useStore';

In plain words

Every page is rendered for one store. useStore() hands your component that store as a plain object: its name, logo, link, social accounts and store-wide settings.

It reads what the engine already loaded for the page, so calling it is instant and makes no request. Call it at the top of a component, like any hook.

Signature

function useStore(): UseStoreResult

interface UseStoreResult extends Store {
  refresh: () => Promise<void>;
}

Try it live

The real store object this page was rendered with. Expand a field to look inside.Try this: press refresh(): it re-reads the store from the Salla SDK once the SDK has loaded.
Storefront canvas · ar · RTL
ثيم رائد
id 1510890315 · @dev-vgckq3fssfhjewwi
useStore(): {…} 24 keys
id: 1510890315
ray: 50
logo: "https://cdn.salla.network/salla.com/logo-wide-1.svg"
icon: "https://cdn.salla.network/salla.com/logo-wide-1.svg"
name: "ثيم رائد"
username: "dev-vgckq3fssfhjewwi"
store_country: "SA"
country: "SA"
url: "https://demostore.salla.sa/ar/dev-vgckq3fssfhjewwi/"
settings: {…} 26 keys
meta: {…} 3 keys
scope: null
template: null
contacts: {…} 4 keys
social: {…} 4 keys
description: "<p class="ql-direction-rtl">هذا المتجر التجريبي يتيح لك استكشاف شكل وتصميم المتاجر على منصة <strong>سلة</strong>. تصفّح الأقسام، جرّب تجربة الشراء، واستعرض الم…"
apps: {…} 2 keys
features: Array(18)
is_merchant: false
support_pickup: true
order_instruction: {…} 4 keys
shipping: {…} 3 keys
rating: {…} 2 keys
ratings: Array(2)
What a theme writes
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';

export function StoreBadge() {
  // The store's fields are spread at the top level: there is no `store` key.
  const { name, logo } = useStore();
  return (
    <span className="store-badge">
      <img src={logo} alt="" width={24} height={24} />
      {name}
    </span>
  );
}

Example

app/components/StoreBadge.tsx
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';

export function StoreBadge() {
  const { name, logo } = useStore();
  return (
    <span className="store-badge">
      <img src={logo} alt="" width={24} height={24} />
      {name}
    </span>
  );
}

How it behaves

  • The store fields are spread onto the result, so destructure them directly: const { name, logo } = useStore(). There is no store key.

  • refresh() reads Salla.config.all() and merges its store into the provider state. It does nothing until the Salla SDK exists (it is undefined during the server render).

  • It is useTwilight().store plus refresh, so it throws outside TwilightProvider.

Gotchas

  • docs/18-hooks-api.md shows const { store, refresh } = useStore(). That store is undefined: the fields are spread at the top level of the result.

Related

useTheme

Reads the merchant's theme colors, font, theme settings and whether the page reads right-to-left.

useMoney

Formats prices in the page language (with the riyal icon for SAR), and parses or validates amounts.

Source and docs