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

registerComponents, overrideComponents

functionBeginnerserverbrowserlive demo

Register or override many named components in one call, from an object whose keys are names and whose values are components.

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

In plain words

When a theme registers several components, one object reads better than a column of calls: registerComponents({ 'my-theme:hero': Hero, 'my-theme:note': Note }).

overrideComponents does the same with override, so each previous component is kept as the original.

Signature

function registerComponents(components: Record<string, ComponentType>): void  // registry.register for each entry
function overrideComponents(components: Record<string, ComponentType>): void  // registry.override for each entry

Try it live

The bulk helpers loop over an object and call register or override once per key, on the global registry.Try this: pick "overrideComponents only": with nothing registered first, override behaves like register and no original is kept.
Storefront canvas · ar · RTL
Runs in the browser…
Controls
What a theme writes
import { registerComponents } from '@salla.sa/twilight-theme-engine';

// app/router.tsx, at module scope
registerComponents({
  'my-theme:hero': Hero,
  'my-theme:note': Note,
});

Example

app/router.tsx
import { overrideComponents, registerComponents } from '@salla.sa/twilight-theme-engine';
import { SeasonalHero, SeasonalNote } from './components/seasonal';
import { Hero, Note } from './components/blocks';

registerComponents({
  'my-theme:hero': Hero,
  'my-theme:note': Note,
});

// During a campaign: the originals stay available to useOriginalComponent().
overrideComponents({
  'my-theme:hero': SeasonalHero,
  'my-theme:note': SeasonalNote,
});

How it behaves

  • Entries are applied in object order, each with one registry call; there is nothing else to them.

  • For home blocks prefer registerHomeComponents() from /routes/home, which adds the home: prefix the home page renderer looks up.

Gotchas

  • Their parameter is Record<string, ComponentType>, props typed Record<string, unknown>, so a component with a required prop does not compile: overrideComponents({ x: ({ title }: { title: string }) => … }) fails with TS2322. Register such components one by one with the generic registry.register<P>(), or type their props as optional.

  • overrideComponents on names nothing registered records no originals. For product:card call registerComponents first (see registry).

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.

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.

useComponent

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

Source and docs