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: {},
 };