React binding
@sankhyatronics/sankhya-cms-react contains no UI of its own. Each export wraps a Lit element with @lit/react, so properties are set as properties and events are onXxx props. A few adapters translate React-style props into the element's slots (icon strings, isActive, ariaLabel, menuBar / utilityButtons).
Components
Every component is exported under its JSON type name: Hero, Header, Footer, Stats, …
import { Hero, Stats } from '@sankhyatronics/sankhya-cms-react';
<Hero title="Hello" actionLabel="Start" href="/start" />
<Stats items={[{ value: '120+', label: 'Customers' }]} />
DynamicRenderer
Renders page JSON:
import { DynamicRenderer } from '@sankhyatronics/sankhya-cms-react';
<DynamicRenderer config={page} handlers={{ toggleTheme }} onError={(error, node) => report(error, node)} />
A node that fails to render is contained by its own error boundary; the rest of the page still renders. Register your own components with registerComponent('MyType', MyComponent).
Routing
Inside a react-router <Router>, clicks on internal links (hrefs with no scheme) are routed with navigate() instead of reloading the page. Outside a router they behave as normal links. Calling event.preventDefault() in your own handler opts out.
The CTAs (Hero, PromoBanner, FeatureSplit) and the nav elements are real links when they have an href, and their events are cancelable: the router cancels the event for an internal link and navigates itself. External URLs, #anchors and mailto: links are left to the browser. Plain links inside BentoGrid, FeaturesSection and FeatureItem are routed the same way.
Current page in the header
Inside a <Router>, Header marks the nav link for the current location (aria-current="page") from useLocation(), so nothing is needed on each page. To set it yourself (outside a router, or to show a different page), pass currentPath="/t-pilot". See st-header for the matching rules.
Helpers
| Export | Purpose |
|---|---|
patchNodeById(nodes, id, props) | Returns a copy of the page with props merged into one node — inject runtime state (such as the selected language) without mutating fetched JSON. |
validatePage, validateNode, componentTags | Re-exported from @sankhyatronics/sankhya-cms/schema. |
fetchLocalContent, fetchGithubContent | Fetch page JSON from your own site or a GitHub repo. |
UserProvider, useUser | Language and theme state with local storage persistence. |
ScrollToTop | Scrolls to the top on route changes. |