Canvas Code Components as SDC
No security coverage
This module makes React code components built with Drupal Canvas reusable throughout your Drupal site. It allows you to use these components in various Drupal templates, render arrays, and PHP code, enabling consistent theming across your entire project.
Drupal Canvas lets you build React code components in the browser, but they can only be placed using Canvas.. This module registers each one as a Single Directory Component, so the rest of your site can use them too.
Use it to theme anything Canvas doesn't reach:
- Node, term, user, media and Commerce templates — node--article.html.twig, field--*.html.twig
- Views row and field templates
- Blocks, regions, menus, page.html.twig, html.html.twig
- Any render array, from a preprocess function, block plugin, field formatter, controller or Layout Builder
From a Twig template:
{{ include('code_component:hero', { title: 'Hello' }) }}
Or from PHP:
$build['promo'] = [
'#type' => 'component',
'#component' => 'code_component:hero',
'#props' => ['title' => 'Hello'],
];
Props and slots come straight from the code component, and rendering reuses Canvas's own hydration, so a component behaves the same whether it is placed in Canvas or called from a template.