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

Component

componentBeginnerserverbrowserlive demo

Renders the component registered under a name, passing every other prop to it, or a fallback when nothing is registered there.

import { Component, ComponentProps } from '@salla.sa/twilight-theme-engine';

In plain words

<Component name="my-theme:promo" title="Sale" /> means: look up my-theme:promo in the registry and render it with title="Sale". When nothing is registered under that name, it renders fallback, or nothing at all.

It lets one part of a page leave a named gap that another part of the theme fills.

Signature

function Component(props: ComponentProps): React.ReactNode

interface ComponentProps {
  name: string;
  fallback?: React.ReactNode;   // default: null
  [prop: string]: unknown;      // passed to the resolved component
}

Try it live

Component renders whatever is registered under a name, passing every other prop through.Try this: pick playground:missing: nothing is registered, so the fallback renders. Clear the fallback and nothing renders at all.
Storefront canvas · en · LTR
Runs in the browser…
Controls
What a theme writes
import { Component } from '@salla.sa/twilight-theme-engine';

export function Greeting() {
  return (
    <Component
      name="playground:greeting"
      who="Sara"
      fallback={<em>Nothing registered under this name.</em>}
    />
  );
}

Example

app/components/ProductExtras.tsx
import { Component } from '@salla.sa/twilight-theme-engine';

export function ProductExtras({ productId }: { productId: number }) {
  return (
    <Component
      name="my-theme:product-extras"
      productId={productId}
      fallback={<p className="text-sm">No extras for this product.</p>}
    />
  );
}

How it behaves

  • It calls registry.resolve(name) on every render. There is no subscription: a registration made later shows up at the next render.

  • Extra props are typed unknown and reach the resolved component untouched. For typed props, use useComponent<Props>(name).

Gotchas

  • In development (process.env.NODE_ENV === 'development') a missing name is reported with window.Salla?.logger?.warn(…), which reads window without checking that it exists (src/components/Component.tsx). A missing name rendered on the server in development can therefore throw window is not defined. Register every name before it renders.

Related

registry

The shared name-to-component table the engine consults for a few swappable parts: the product card, the product gallery and home blocks.

useComponent

Return the component registered under a name, or the one it replaced, so you render it yourself with typed props.

defineComponent

Registers a component under a name when its file loads, and returns the same component so it can also be imported and rendered directly.

Source and docs