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();npm install ellucian-developer/experience-extension-hooks
You will need to add this to your webpack.config.js in the "For advanced scenarios ..."
// this is needed for @ellucian/experience-extension-hooks
webpackConfig.module.rules.forEach( rule => {
if (rule.loader === 'babel-loader') {
rule.exclude = /node_modules\/(?!(@ellucian)\/)/
}
})
Rename .babelrc to babel.config.js and convert to JS syntax so that is looks like:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/transform-runtime'
],
env: {
test: {
plugins: [
'rewire'
]
}
}
}
List of hooks available for all Extension component types
note: Ellucian has an internal component type of Admin which is not available to customer developers
const { clear, getItem, removeItem, storeItem } = useCache();const { getEthosQuery, getEthosQueryResourceVersions, getExtensionJwt } = useData();
getEthosQuery and _getEthosQueryResourceVersions are only used for Card and Page components
const { version } = useExperienceInfo();version is Dashboard version or Setup version for Admin components
const {
navigateToPage,
setErrorMessage,
setExitPrompt,
setLoadingStatus,
setPageTitle,
setPageToolbar
setPreventRemove,
setPreventRemoveMessage
} = useExtensionControl();setExitPrompt, setPageTitle, and setPageToolbar are only used for Page components
setPreventRemove, and setPreventRemoveMessageare only used for Card components
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 in useCardInfo.
const { firstName, locale, roles, tenantId } = useUserInfo();const { dashboardBackgroundColor, primaryColor, secondaryColor, ctaColors } = useThemeInfo();const { cardId, configuration } = useCardInfo()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>
)
}Copyright 2021–2022 Ellucian Company L.P. and its affiliates.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent