Extension

Configuration example

1. Remote universal mode (recommended)

   {
     "component": "Extension",
     "componentProps": {
       "extensionType": "remote-common",
       "extensionJsUrl": "https://example.com/foo.js",
       "extensionCssUrl": "https://example.com/foo.css",
       "extensionParams": {
         "userId": ":context.userProfile.id"
       }
     }
   }

   // https://example.com/foo.js
   
   export default function mount(element, { params, formApi, messageApi, restApi, i18nApi, routerApi }) {
     console.log(params);
     // print: { userId: 1234 }
   
     element.innerText = 'Hello World';
   
     const resizeListener = () => {
       // resize
     }
   
     window.addEventListener('resize', resizeListener);
   
     return function unmount() {
       // do cleanup
       window.removeEventListener('resize', resizeListener);
     }
   }

2. Local react mode

   {
     "component": "Extension",
     "componentProps": {
       "extensionType": "local-react",
       "extensionId": "com.example.custom-extension",
       "extensionParams": {
         "userId": ":context.userProfile.id"
       }
     }
   }

   After the project is exported, it is implemented locally and registered

   import { setup } from '@icp/settings';
   import MyCustomExtension from './MyCustomExtension';
   
   setup({
     extensionComponents: {
       'com.example.custom-extension': MyCustomExtension
     }
   });

Function description

Extended components support 2 modes: local react, remote common

• Local react: The implementation of the component is completed locally after exporting the project, and is registered through extensionId
• Remote General: The implementation of the component is exported by the external ESM module default, and the js file and css file are loaded through the URL.

Container properties

All component configurations support Container properties at the first level.

Component properties

Name	Type	Default	Supports Variable Pattern	Description
className	string		✔️	Root div's className
style	object			Root div's style
extensionType	'local-react' | 'remote-common'			Mode: local react or remote common
extensionId	string			Use local react mode, id when registering
extensionJsUrl	string			Use the remote general mode, js file address
extensionCssUrl	string			Use the remote general mode, css file address
extensionParams	object		✔️	Passed in extended parameter object

JS API

The interface obtained through formApi.getFieldApi() is as follows:

Name	Type	Description
node	HTML Element	The root DOM element of the component