useContentBlock

{
    rfkId,
    actions: {
    },
    context: {
        // Here we destructure the context variables that we would like to obtain.
    },
    queryResult: {
        isLoading, // The query has no data and is currently fetching
        isError,// The query encountered an error
        isSuccess, // The query was successful and data is available
        isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true.
        data: {
            appearance: {
                css_names: [string],
                html_names: [string],
                variables: {
                    [variableName: string]: {
                        valueType : string
                        required : boolean
                        expanded : boolean
                        value : string | number
                    }
                },
                templates: {
                    html:{
                        devices: {
                            pc: { content: string },
                            // optional
                            tablet: { content: string },
                            // optional
                            mobile: { content: string }
                        }
                    },
                    css: {
                        devices: {
                            pc: { content: string },
                            // optional
                            tablet: { content: string },
                            // optional
                            mobile: { content: string }
                        }
                    }
                }
            }
        } = {},
    },
}

import { useContentBlock } from '@sitecore-discover/react';

import {
  useContentBlock,
  useWidgetVisibility,
  widget,
  WidgetDataType,
} from "@sitecore-discover/react";
import { createElement, useLayoutEffect, useRef } from "react";

function addStyle(rfkId, node, css) {
  let styleNode = document.querySelector(`[data-rfk-id-style=${rfkId}]`);
  if (!styleNode) {
    styleNode = document.createElement("style");
    styleNode.setAttribute("type", "text/css");
    styleNode.dataset.rfkIdStyle = rfkId;
    node.parentNode?.appendChild(styleNode);
  }
  styleNode.innerHTML = css;
}

const ContentBlockWidget = () => {
  const {
    rfkId,
    queryResult: {
      data: {
        appearance: {
          css_names: cssNames = [],
          templates: {
            html: {
              devices: { pc: { content: htmlContent = null } = {} } = {},
            } = {},
            css: {
              devices: { pc: { content: cssContent = null } = {} } = {},
            } = {},
          } = {},
        } = {},
      } = {},
    },
  } = useContentBlock();
  const { ref } = useWidgetVisibility();
  const contentRef = useRef(null);

  // sets widget styles
  useLayoutEffect(() => {
    if (contentRef.current && cssContent) {
      addStyle(rfkId, contentRef.current, cssContent);
    }
  }, [rfkId, cssContent]);

  // sets widget content
  useLayoutEffect(() => {
    if (contentRef.current && htmlContent) {
      contentRef.current.innerHTML = htmlContent;
    }
  }, [htmlContent]);
  return createElement(
    "div",
    { ref, "data-rfkid": rfkId, className: cssNames.join(" ") },
    createElement("div", { ref: contentRef })
  );
};

export default widget(ContentBlockWidget, WidgetDataType.CONTENT_BLOCK);