feat: custom extension rendering

library/src/components/Extensions.tsx

@@ -3,12 +3,19 @@ import React from 'react';
 import { Schema } from './Schema';
 
 import { SchemaHelpers } from '../helpers';
+import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 interface Props {
   name?: string;
   item: any;
 }
 
+export interface ExtensionComponentProps<V = any> {
+  propertyName: string;
+  propertyValue: V;
+  document: AsyncAPIDocumentInterface;
+}
+
 export const Extensions: React.FunctionComponent<Props> = ({
   name = 'Extensions',
   item,

library/src/components/Schema.tsx

@@ -3,6 +3,7 @@ import { SchemaInterface } from '@asyncapi/parser';
 
 import { Href, CollapseButton, Markdown, Extensions } from './index';
 import { SchemaHelpers } from '../helpers';
+import { useConfig, useSpec } from '../contexts';
 
 interface Props {
   schemaName?: React.ReactNode;
@@ -37,6 +38,8 @@ export const Schema: React.FunctionComponent<Props> = ({
   const { reverse, deepExpanded } = useContext(SchemaContext);
   const [expanded, setExpanded] = useState(propExpanded || isArray);
   const [deepExpand, setDeepExpand] = useState(false);
+  const config = useConfig();
+  const document = useSpec();
 
   useEffect(() => {
     if (!isArray) {
@@ -87,6 +90,20 @@ export const Schema: React.FunctionComponent<Props> = ({
       schemaName
     );
 
+  const extensions = config.extensions;
+
+  if (typeof schemaName === 'string' && extensions && extensions[schemaName]) {
+    const Component = extensions[schemaName];
+
+    return (
+      <Component
+        propertyValue={schema.const()}
+        propertyName={schemaName}
+        document={document}
+      />
+    );
+  }
+
   return (
     <SchemaContext.Provider
       value={{ reverse: !reverse, deepExpanded: deepExpand }}

library/src/config/config.ts

@@ -1,3 +1,5 @@
+import { ExtensionComponentProps } from '../components';
+
 export interface ConfigInterface {
   schemaID?: string;
   show?: ShowConfig;
@@ -10,6 +12,7 @@ export interface ConfigInterface {
   receiveLabel?: string;
   requestLabel?: string;
   replyLabel?: string;
+  extensions?: Record<string, React.ComponentType<ExtensionComponentProps>>;
 }
 
 export interface ShowConfig {

library/src/config/default.ts

@@ -32,4 +32,5 @@ export const defaultConfig: ConfigInterface = {
   receiveLabel: RECEIVE_TEXT_LABEL_DEFAULT_TEXT,
   requestLabel: REQUEST_LABEL_DEFAULT_TEXT,
   replyLabel: REPLIER_LABEL_DEFAULT_TEXT,
+  extensions: {},
 };