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-developer/experience-extension-hooks

Edit webpack.config.js

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)\/)/
        }
    })

Use babel.config.js

Rename .babelrc to bable.config.js and covert 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'
            ]
        }
    }
}

The Hooks

Universal hooks

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

• 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,
    setPreventRemove,
    setPreventRemoveMessage
} = 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

setPreventRemove is only used for Card and Page components

setPreventRemoveMessage is only used for Card and Page components

• 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>
    )
}