---
title: "useContentBlock"
slug: "usecontentblock"
abstract: "React JS SDKのuseContentBlockクエリフックの詳細Sitecore Search。"
---
# useContentBlock

コンテンツブロッククエリフックを使って、コンテンツブロックをレンダリングするために必要な外観情報やデータを取得してください。

## Requestパラメータ

コンテンツブロックのクエリフックにはパラメータがありません。

## ジェネリック応答

{
 rfkId,
 // the widget ID is added here.
 actions: {
 },
 state: {
 // 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);

> !注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。
> 
> コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。