Slot Component
The Slot
component provides low-level access to Zudoku's slot system, allowing
you to programmatically manage content injection in custom pages and React
components.
Import
Code
Components
The Slot system consists of two main components:
Slot.Target
Renders content that has been injected into a specific slot.
Code
Props:
name
(required): The slot name to render content forfallback
(optional): Content to show when no slot content is available
Slot.Source
Injects content into a specific slot. This component renders nothing but
registers content to be displayed by Slot.Target
components.
Code
Props:
name
(required): The slot name to inject content intotype
(optional): How to handle multiple content sources"replace"
(default): Replace existing content"prepend"
: Add before existing content"append"
: Add after existing content
children
: The content to inject
Usage Example
Code
Type Safety
The Slot component is fully type-safe. All predefined slot names are available with autocomplete:
Code
Adding Custom Slot Names
To add your own slot names with full type safety, augment the CustomSlotNames
type:
Code
Integration with Configuration
The Slot component works with configuration-based slots. Content defined in your
zudoku.config.tsx
and content injected via Slot.Source
components will be
combined according to the type
parameter.
Code
For basic configuration usage, see the Slots Configuration documentation.