This utility allows you to easily add as many "mini"-react apps to a cornerstone theme. All react apps are contained
within a single app, and are added throughout the page using React Portals. You can easily update a component with new
props if needed. In addition, all components automatically receive the page's context
.
There are 2 requirements to get started:
- In your
templates/layouts/base.html
file, add an element to the bottom of the page, right above the closing body tag. This can be anything, but it must have a unique id. Something like this would work:<div id="cornerstone-react-root"></div>
- In your
assets/js/theme/global.js
file, importcreateRoot
from thecornerstone-react
package. At the top of theonReady
method, add the following:createRoot(document.getElementById('cornerstone-react-root'), this.context);
Now you can start creating react components and add them to any page. For example:
// assets/js/components/MyComponent.js
import { useCornerstoneContext } from './CornerstoneContext';
export function ProductName(props) {
const cornerstoneContext = useCornerstoneContext();
return <div>{props.label}: {cornerstoneContext.product.name}</div>;
}
// assets/js/theme/common/product-detail.js
import { ProductName } from '../../components/MyComponent.js';
export default class ProductDetails extends ProductDetailsBase {
constructor($scope, context, productAttributesData = {}) {
super($scope, context);
registerComponent(ProductName, { label: 'Product Name' });
}
}
If you need to later update the component, you can do so by calling render
on the returned ConerstoneComponent
instance
export default class ProductDetails extends ProductDetailsBase {
constructor($scope, context, productAttributesData = {}) {
super($scope, context);
this.productNameComponent = registerComponent(ProductName, { label: 'Product Name' });
}
changeProductNameLabel(newLabel) {
this.productNameComponent.render({ label: newLabel });
}
}