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

Utilities

./utils./utils/baseHead./utils/cdn-image./utils/head

Pure helpers: asset and CDN URLs, colors, head tags, document attributes, SDK access.

Small functions that do one job and have no side effects, such as building an image URL at the right size or merging page <head> tags. They run the same on the server and in the browser.

Entries

getCdnImageUrl, getCdnImageSrcSet

Rewrite a Salla CDN image URL into a resized copy, or into a srcset of several widths, so pictures download faster.

functionBeginnerlive demo
asset, cdn, isPlaceholder

Build URLs for your theme's own files and for Salla's asset CDN, as plain functions you can call outside components.

functionBeginnerlive demo
color

Reads a six-digit hex color and returns a readable text color, a dark flag, and darker, lighter or inverted shades.

functionBeginnerlive demo
formatSallaPlural

Picks the right plural form out of a Salla translation such as '{1} one item|[2,*] :count items' and fills in the number.

functionBeginnerlive demo
getMobileOS, resolveAppStoreUrl

Detect whether the visitor uses an iPhone or Android device, and pick the store's matching App Store or Google Play link.

functionBeginnerlive demo
sortOptions

Returns the five product sort orders the listing understands, with names in the page language and the current one flagged, ready for a select.

functionBeginnerlive demo
getSallaSDK

Returns the Salla SDK (window.Salla) in the browser and undefined on the server, so code can reach it without touching window.

functionBeginnerlive demo
stripUnsafeHtml

Removes script-like tags, event handlers and quoted javascript: links from HTML you already trust; it is not a sanitizer for untrusted input.

functionBeginnerlive demo
HeadDescriptor

The plain object a route's head() returns: title, description, Open Graph and Twitter cards, hreflang links, JSON-LD and extra tags.

interfaceBeginnerlive demo
mergeHead

Lays additions over a base HeadDescriptor: tag lists are appended, Open Graph and Twitter merged one level, every other field replaced.

functionAdvancedlive demo
buildBaseHead, localeToOgLocale

Builds the store-wide head defaults (title, description, canonical, Open Graph, Twitter card) from the store settings; the root route already applies them.

functionAdvancedlive demo
buildHreflangAlternates

Builds the hreflang links that tell search engines the same page exists in each store language, plus an x-default.

functionAdvancedlive demo
resolveHead, setHeadAdapter

Converts a HeadDescriptor into the active framework's head format through a global adapter, which createRouter() installs for TanStack.

functionAdvanced
mergeDocumentDescriptors

Merges several { html, body } attribute descriptors into React props for the html and body elements: classes combined, other attributes last-wins.

functionAdvancedlive demo
normalizeClasses, mergeElementAttrs, toReactProps

The three steps of every html and body attribute merge: split class lists, merge attribute objects in order, rename class to className.

functionAdvancedlive demo
syncAttrsToElement

Writes an attribute object onto a real DOM element and removes what its previous call wrote, leaving attributes from other code alone.

functionAdvancedlive demo
dispatchRouteChanged

Fires the Salla SDK event route::changed with the current page data; the TanStack router already fires it after every navigation.

functionAdvancedlive demo
registerThemeHookSlots

Declares hook slot names your theme renders itself, so the Salla SDK lets marketplace apps mount content into them.

functionAdvancedlive demo
AUTH_TOKEN_COOKIE_NAME, extractTokenFromCookies, clearAuthTokenCookie

The customer's session cookie: its name, a reader that pulls one cookie out of a Cookie header, and a function that deletes it.

functionAdvancedlive demo
getStoreIdentifier

Returns which store the current request or page is for, as sent in the store-identifier header; platform plumbing that themes rarely need.

functionAdvanced
applyAppScopeMocks

Overrides one installed app's private app.* settings with preview values in the browser; platform plumbing for app previews, not for themes.

functionAdvanced
StoreContext

The processed store settings type, re-exported here so code that calls the head helpers can type the settings it passes.

interfaceAdvanced