Custom Components

Component Classification

To ensure the stability and maintainability of Global IM UIKit while providing sufficient flexibility and extensibility to meet developers' customization needs, all internal components in Global IM UIKit are designed into two categories: Provider components and Component components.

Component components are stateless components responsible solely for UI rendering and do not handle data management. These components drive UI rendering updates by receiving external props inputs but cannot modify the props data itself.

Provider components are business container components that encapsulate complex business logic such as reactive data management and interaction event dispatching. These components are black boxes to developers, and their tag names end with -provider.

Global IM UIKit allows developers to override and replace certain Component components to meet deep customization requirements.

registerCustomElement

Global IM UIKit provides the registerCustomElement interface for registering custom components. You can use this interface to override and replace internal components of Global IM UIKit to meet deep customization needs.

tip

• This interface is only effective before the ready call.
• Since custom component registration is relatively complex, it is recommended to use Typescript for business development to achieve better IDE syntax hinting and type inference.
• Global IM UIKit internally uses Vue as the DOM component rendering engine. Therefore, when defining custom components using this interface, the component template syntax remains consistent with Vue.

To ensure forward compatibility during the iterative upgrades of Global IM UIKit, only certain components are temporarily allowed to be overridden.

Parameter Description

Parameter	Type	Required	Description
tag	RCKitOverrideAbleComponent	Yes	The identifier of the component to be overridden, which is an enumeration value of RCKitOverrideAbleComponent.
options	[IRCKitDefineCustomElementOptions<T>]	Yes	Component configuration.

IRCKitDefineCustomElementOptions Description

Attribute	Type	Required	Description
template	string	Yes	Component template, using Vue component template syntax.
setup	(props: T, ctx: [IRCKitCustomElementContext]) => any	Yes	Component logic handling function.
styles	string[]	No	Component stylesheets.

Code Example

// Override the voice message component
kitApp.registerCustomElement(RCKitOverrideAbleComponent.HQVoiceMessageComponent, {
  setup(props, ctx) {
    const value = props.value;
    return { value }
  },
  template: `<button @click="value.toggle()">{{ value.playing ? 'Pause' : 'Play' }}</button><br/>
    playing: {{ value.playing }}<br/>
    progress: {{ value.progress }} / 100<br/>
    duration: {{ value.duration }}s<br/>`
});

Reusing Existing Components

Global IM UIKit allows developers to reuse overridden components in the template by using the <rc-origin> tag placeholder.

Code Example

// Override the voice message component
kitApp.registerCustomElement(RCKitOverrideAbleComponent.HQVoiceMessageComponent, {
  setup(props, ctx) {
    const value = props.value;
    const onClick = () => {
      console.log('Clicked the custom test button');
    };
    return { value, onClick }
  },
  // Use the <rc-origin> tag placeholder in the template to reuse the overridden component. Note the passing of the value attribute.
  template: `
    <rc-origin :value="value"></rc-origin>
    <br/>
    <button @click="onClick">Test</button><br/>
  `
});