Experience Extension Hooks
This package provides useful hooks to access the Extension properties using React Contexts
The several hooks provide logical groups of the properties passed by Experience to an extension as properties.
Using these hooks avoids having to pass Extension properties through layers of React Components. To use any of these hooks add code to your Extension component (at any level) like the following:
import { useCardInfo, useCache, useData } from '@ellucian/experience-extension-hooks';
...
const cache = useCache();
const { getExtensionJwt } = useData();
const { configuration: {myConfigurationKey = ''} } = useCardInfo();
Installation
npm install @ellucian/experience-extension-hooks
The Hooks
Universal hooks
Hooks available for all Extension component types
-
useCache
const { clear, getItme, removeItem, storeItem } = useCache();
-
useData
const { getEthosQuery, getEthosQueryResourceVersions, getExtensionJwt } = useData();
getEthosQuery and _getEthosQueryResourceVersions are only used for Card and Page components
-
useExperienceInfo
const { version } = useExperienceInfo();
version is Dashboard version or Setup version for Admin components
-
useExtensionControl
const { navigateToPage, setErrorMessage, setLoadingStatus } = useExtensionControl();
navigateToPage is only used for Card and Page components
setErrorMessage and setLoadingStatus work regardless of Component type. No need to use PageControl vs CardControl
-
useExtensionInfo
const { basePath, configuration, extensionId, type } = useExtensionInfo();
basePath is only used for Page and Admin components
configuration is only used for Page to convey extension configuration. Note for cards, the extension configuration is combined with the card configuration.
-
useUserInfo
const { firstName, locale, roles, tenantId } = useUserInfo();
Card and Page hooks
-
useThemeInfo
const { clear, getItme, removeItem, storeItem } = useThemeInfo();
Card hooks
-
useCardInfo
const { cardId, configuration } = useCardInfo()
Usage
The context needs to be wired into each card and page. To do this add similar code to each card and page as follows.
import { ExtensionProvider } from '@ellucian/experience-extension-hooks';
...
export default function CardOrPageWithProviders(props) {
return (
<ExtensionProvider {...props}>
<MyCardOrPageComponent/>
</ExtensionProvider>
)
}