Install
Works with Drupal: ^10.3 || ^11Using Composer to manage Drupal site dependencies
Alternative installation files
Download tar.gz
54.21 KB
MD5: 0edf6f032f957612f84d6b36a28dd97e
SHA-1: e1b139b54bad461566f2b4c32d8956f2213fe703
SHA-256: 99eeaf86e6f845fe3bdac9b451667d2d8a96337dcc34c34f9fc809b7f8f3a55f
Download zip
119.51 KB
MD5: b20420cd0eb2d5417015c6fe68ba64ee
SHA-1: acd6f7fe141ffc17f109210ded88405d51155d03
SHA-256: ee68b5ae80712a1c4f0156c9eacc68b23d2fcff1075c22324370e7a5602d4c5d
Release notes
First alpha release of SDX React Base, a hidden base theme that provides React component implementations for standard Drupal theme hooks. Extend this theme to build React-powered Drupal admin or frontend themes without re-implementing common templates.
Template overrides
50+ Drupal theme hooks implemented as React components:
- Form elements: input, textarea, select, checkboxes, radios, datetime, details, fieldset, vertical tabs
- Block system: generic block + specific overrides for page title, breadcrumb, messages, menu blocks, and more
- Views: views-view, views-view-table, views-view-unformatted, views-mini-pager
- Navigation: menu, breadcrumb, pager, local tasks, local actions
- Administration: status-report, system-modules, system-themes-page, admin-page, confirm-form
- Fields: field, field-multiple-value-form
- Utility: table, image, links, dropbutton, page-title
SPA shell
- BaseLayout component with region rendering and content area
- Toast notification system
- Confirm modal portal for entity delete operations
- Wrapped in ComponentRegistryProvider for template resolution
Shared components
- SidePanel: dual-mode component for content display and Drupal form loading
- useDrupalForm: hook encapsulating AJAX form handling, CSRF tokens, multi-step forms, and response parsing
- ErrorBoundary: graceful error display with retry and component stack logging
- useFocusTrap: focus trap hook for modals and panels
- Select: native and styled select component
- TagInput: pill-based autocomplete input
- DropdownMenu: accessible dropdown menu
- BlockShell: block wrapper with contextual links support
Code quality
- Full TypeScript with proper interfaces and typed hooks
- All imports use SDX aliases (
@sdx/*,@theme:sdx_react_base/*), no relative paths - All user-facing strings use Drupal's
t()translation function - Accessibility attributes throughout (aria-modal, aria-label, role, focus management)
- No placeholder code, no hardcoded values
Requirements
- SDX core module with sdx_react and sdx_router enabled
- SDX Engine