[sitecore-jss-react] Pass ComponentProps param to BYOCComponent

Sitecore · Dec 7, 2023 · f0f058b · f0f058b
1 parent 31a4710
commit f0f058b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx
@@ -6,11 +6,11 @@ import { BYOCComponent } from './BYOCComponent';
 import { MissingComponent, MissingComponentProps } from './MissingComponent';
 
 describe('BYOCComponent', () => {
-  it('should render with props when ComponentDataOverride is provided', () => {
+  it('should render with props when ComponentProps is provided', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
+        ComponentProps: JSON.stringify({ prop1: 'value1' }),
       },
       fetchedData: {},
     };
@@ -38,7 +38,7 @@ describe('BYOCComponent', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
+        ComponentProps: JSON.stringify({ prop1: 'value1' }),
       },
       fetchedData,
     };
@@ -67,7 +67,7 @@ describe('BYOCComponent', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
+        ComponentProps: JSON.stringify({ prop1: 'value1' }),
       },
     };
     const Foo = () => <p id="foo-content">Test</p>;
@@ -93,7 +93,7 @@ describe('Error handling', () => {
     const props = {
       params: {
         ComponentName: 'ExampleComponent',
-        ComponentDataOverride: 'invalid-json',
+        ComponentProps: 'invalid-json',
       },
       fetchedData: {},
     };
@@ -108,7 +108,7 @@ describe('Error handling', () => {
       errorComponent: customErrorComponent,
       params: {
         ComponentName: 'ExampleComponent',
-        ComponentDataOverride: 'invalid-json',
+        ComponentProps: 'invalid-json',
       },
       fetchedData: {},
     };

diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.tsx
@@ -27,6 +27,10 @@ export type BYOCComponentParams = {
   /**
    * JSON props to pass into rendered component
    */
+  ComponentProps?: string;
+  /**
+   * A JSON object with data sources to be fetched and passed to the component
+   */
   ComponentDataOverride?: string;
   /**
    * A string with classes that can be used to apply themes, via SXA functionality
@@ -133,9 +137,9 @@ export class BYOCComponent extends React.Component<BYOCComponentProps> {
 
     let componentProps: { [key: string]: any } = null;
 
-    if (props.params?.ComponentDataOverride) {
+    if (props.params?.ComponentProps) {
       try {
-        componentProps = JSON.parse(props.params.ComponentDataOverride) ?? {};
+        componentProps = JSON.parse(props.params.ComponentProps) ?? {};
       } catch (e) {
         console.error(
           `Parsing props for ${componentName} component from rendering params failed. Error: ${e}`