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

Data types

./types./types/hooks

TypeScript shapes for the store, theme, products, customers and hook slots.

Types describe the shape of data (which fields a product has, for example) so your editor can autocomplete them and catch typos before the code runs. They are removed when the theme is built.

Entries

Product

Describes a product as the products API returns it: name, prices, images, stock flags, category, brand and tags.

interfaceBeginnerlive demo
Store

Describes the current store and its store-wide settings: name, logo, address, contacts, social accounts, apps and feature switches.

interfaceBeginnerlive demo
Theme

Describes the merchant's theme record: colors, font, live or preview mode, and the settings object your twilight.json declares.

interfaceBeginnerlive demo
Cart

Describes the shopper's cart as the cart API returns it: items, totals, coupon, free-shipping progress, and the Money price shape.

interfaceBeginnerlive demo
User

Describes the signed-in customer's profile: name, email, mobile, avatar, preferences and linked social accounts.

interfaceBeginner
Category, MenuItem, Breadcrumb, Page

Describes categories, menu links, breadcrumb steps, and the Page record a route loader returns to name the current page.

interfaceBeginner
ProductOption, ProductSku and friends

Describes a product's options and their choices, the SKU variants those choices select, back-in-stock alerts and donation progress.

interfaceAdvancedlive demo
HomeComponentData and home block item types

Describes the home page blocks a merchant arranges, and the brand, feature, testimonial and slide items some blocks list.

interfaceAdvancedlive demo
BootData and the settings response types

Describes the raw store settings response: store, theme, currencies, languages, login and analytics configuration, and echoed headers.

interfaceAdvancedlive demo
HookName and hook handler types

The hook slot names and handler types, from a subpath that loads no React code and registers no default handlers.

enumAdvanced
LayoutProps, ComponentType and other helpers

Small helper types: a custom layout's props, the components the registry stores, loosely shaped JSON data, and nested translations.

typeAdvanced