内容应用程序反应工具箱

对 App Framework 的回放 Hooks 提供了一个简单的方式, 将经常需要的功能带入您的基于反应的功能 内容丰富的应用程序。 。 。 .

它们可用于与 create-contentful-app,以及使用 Contentful 的任何其他反应应用程序 应用 SDK。 。 。 .

安装

npm install @contentful/react-apps-toolkit
# or
yarn add @contentful/react-apps-toolkit

可用特性

以下车钩和公用设施均由包出口: 1

SDKProvider 软件

这个 SDKProvider 是折叠组件,自动使内容 应用 SDK 用于任何使用反应环境的儿童组件。 要使用本包中包含的任何钩子,它们必须被包裹在 <SDKProvider>因为所有的钩都依赖于App SDK.

用法 :

import { SDKProvider, useSDK } from '@contentful/react-apps-toolkit';

function ChildComponentUsingHook() {
  const sdk = useSDK<FieldExtensionSDK>();

  return <>App Id: {sdk.ids.app}</>;
}

function App() {
  return (
    <SDKProvider>
      <ChildComponentUsingHook />
    </SDKProvider>
  );
}

使用SDK

useSDK 返回内容的示例 应用 SDK。 。 。 .

它必须包裹在 SDKProvider否则,它就会出错.

用法 :

import { SDKProvider, useSDK } from '@contentful/react-apps-toolkit';

function ComponentUsingSDK() {
  const sdk = useSDK<FieldExtensionSDK>();

  return <>App Id: {sdk.ids.app}</>;
}

function App() {
  return (
    <SDKProvider>
      <ChildComponentUsingSDK />
    </SDKProvider>
  );
}

使用CMA

: 警告: 被否决 如果您正在使用 App SDK v4. 20 或更多使用 sdk.cma 换句话说.

useCMA 返回已初始化的 内容管理 API 客户端。这可以立即用于与应用中的环境通信. 内容管理 API 文件。 。 。 .

说明: 此钩子返回的 CMA 客户端实例会自动被扩展到它被调用的内容空间和环境.

用法 :

import { SDKProvider, useCMA } from '@contentful/react-apps-toolkit';

function ComponentUsingCMA() {
  const cma = useCMA();
  const [entries, setEntries] = useState();

  useEffect(() => {
    cma.entry.getMany().then((data) => setEntries(data.items));
  }, [cma]);

  return <>{entries?.length}</>;
}

function App() {
  return (
    <SDKProvider>
      <ComponentUsingCMA />
    </SDKProvider>
  );
}

使用字段值

useFieldValue 提供用于更新Contentful中给定字段当前值的当前值和设置函数。 如果在 实地位置,它将默认使用当前字段 id 初始化.

如果在 输入边栏位置,或 条目编辑器位置,必须经过一个字段ID才能初始化.

useFieldValue 如果字段有多个地块,也可以选择接受一个地块。 如果没有通过地语,它将使用环境默认地语.

用法 :

外地部分:

import { SDKProvider, useFieldValue } from '@contentful/react-apps-toolkit';

function FieldComponentUsingFieldValue() {
  const [localizedValue, setLocalizedValue] = useFieldValue(sdk.field.id, sdk.field.locale); // specifies the current field and locale

  return <input value={localizedValue} onChange={(e) => setLocalizedValue(e.target.value)} />;
}

function App() {
  return (
    <SDKProvider>
      <FieldComponentUsingFieldValue />
    </SDKProvider>
  );
}

边栏或条目编辑器组件 :

import { SDKProvider, useFieldValue } from '@contentful/react-apps-toolkit';

function ComponentUsingFieldValue() {
  const [defaultValue, setDefaultValue] = useFieldValue('slug', sdk.locales.default); // specifies the "slug" field and the environment's default locale

  return <input value={defaultValue} onChange={(e) => setDefaultValue(e.target.value)} />;
}

function App() {
  return (
    <SDKProvider>
      <ComponentUsingFieldValue />
    </SDKProvider>
  );
}

自动响应器

useAutoResizer 监听 DOM 更改,并在大小改变时更新应用程序的高度.

用法 :

import { SDKProvider, useAutoResizer } from '@contentful/react-apps-toolkit';

function ComponentUsingAutoResizer() {
  useAutoResizer();

  return <div>Component will be auto-resized</div>;
}

function App() {
  return (
    <SDKProvider>
      <ComponentUsingAutoResizer />
    </SDKProvider>
  );
}

资源

• 创建内容应用程序:一个启动器,可以方便地为Contentful提供"靴子"应用.