diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md index 2ccadfbb8..3ea24d82b 100644 --- a/packages/framework/esm-framework/docs/API.md +++ b/packages/framework/esm-framework/docs/API.md @@ -108,6 +108,7 @@ - [useConnectedExtensions](API.md#useconnectedextensions) - [useExtensionSlotMeta](API.md#useextensionslotmeta) - [useExtensionStore](API.md#useextensionstore) +- [useRenderableExtensions](API.md#userenderableextensions) ### Feature Flags Functions @@ -3120,6 +3121,49 @@ ___ ___ +### useRenderableExtensions + +▸ **useRenderableExtensions**(`name`): `React.FC`<`Pick`<[`ExtensionProps`](API.md#extensionprops), ``"state"``\>\>[] + +This is an advanced hook for use-cases where its useful to use the extension system, +but not the `ExtensionSlot` component's rendering of extensions. Use of this hook +should be avoided if possible. + +Functionally, this hook is very similar to the `ExtensionSlot` component, but whereas +an `ExtensionSlot` renders a DOM tree of extensions bound to the slot, this hook simply +returns the extensions as an array of React components that can be wired into a component +however makes sense. + +**`example`** +```ts +const extensions = useRenderableExtensions('my-extension-slot'); +return ( + <> + {extensions.map((Ext, index) => ( + + + + ))} + +) +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `name` | `string` | The name of the extension slot | + +#### Returns + +`React.FC`<`Pick`<[`ExtensionProps`](API.md#extensionprops), ``"state"``\>\>[] + +#### Defined in + +[packages/framework/esm-react-utils/src/useRenderableExtensions.tsx:31](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx#L31) + +___ + ## Feature Flags Functions ### getFeatureFlag diff --git a/packages/framework/esm-react-utils/src/extensions.test.tsx b/packages/framework/esm-react-utils/src/extensions.test.tsx index 5db1f1682..1f43c7452 100644 --- a/packages/framework/esm-react-utils/src/extensions.test.tsx +++ b/packages/framework/esm-react-utils/src/extensions.test.tsx @@ -15,10 +15,10 @@ import { openmrsComponentDecorator, useExtensionSlotMeta, type ExtensionData, + useRenderableExtensions, } from '.'; import userEvent from '@testing-library/user-event'; import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags'; -import useRenderableExtensions from './useRenderableExtensions'; // For some reason in the test context `isEqual` always returns true // when using the import substitution in jest.config.js. Here's a custom diff --git a/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx b/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx index 2ca31c452..518416182 100644 --- a/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx +++ b/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx @@ -28,7 +28,7 @@ import { ComponentContext, Extension, type ExtensionProps, useExtensionSlot } fr * ) * ``` */ -export default function useRenderableExtensions(name: string): Array>> { +export function useRenderableExtensions(name: string): Array>> { const { extensions, extensionSlotModuleName } = useExtensionSlot(name); return name