Configuration Modification
Learn how to use various configuration options available in ConfigInterface.
See the definition of the object that you must pass to props to modify the component configuration:
interface ConfigInterface {
schemaID?: string;
show?: {
sidebar?: boolean;
info?: boolean;
servers?: boolean;
operations?: boolean;
messages?: boolean;
schemas?: boolean;
errors?: boolean;
};
expand?: {
messageExamples?: boolean;
},
sidebar?: {
showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags';
showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags';
},
parserOptions?: ParserOptions;
publishLabel?: string;
subscribeLabel?: string;
}
-
schemaID?: string
This field contains a schema name.
This field is set to asyncapi by default.
-
show?: Partial
This field contains configuration responsible for rendering specific parts of the AsyncAPI component.
All except the sidebar fields are set to true by default.
-
sidebar?: Partial
This field contains configuration responsible for the way of working of the sidebar.
showServers field is set to byDefault by default.
showOperations field is set to byDefault by default.
-
expand?: Partial
This field contains configuration responsible for collapsing and expanding component sections.
messageExamples field is set to false by default.
-
parserOptions?: ParserOptions
This field contains configuration for asyncapi-parser. See available options here.
This field is set to null by default.
-
publishLabel?: string
This field contains configuration responsible for customizing the label for publish operations.
This field is set to PUB by default.
-
subscribeLabel?: string
This field contains configuration responsible for customizing the label for subscribe operations.
This field is set to SUB by default.
See exemplary component configuration in TypeScript and JavaScript.
import * as React from "react";
import { render } from "react-dom";
import AsyncAPIComponent, { ConfigInterface } from "@asyncapi/react-component";
import { schema } from "./mock";
const config: ConfigInterface = {
schemaID: 'custom-spec',
show: {
operations: false,
errors: false,
},
sidebar: {
showServers: 'byServersTags',
showOperations: 'bySpecTags',
},
expand: {
messageExamples: false,
},
};
const App = () => <AsyncAPIComponent schema={schema} config={config} />;
render(<App />, document.getElementById("root"));
import * as React from "react";
import { render } from "react-dom";
import AsyncAPIComponent from "@asyncapi/react-component";
import { schema } from "./mock";
const config = {
schemaID: 'custom-spec',
show: {
operations: false,
errors: false,
},
sidebar: {
showServers: 'byServersTags',
showOperations: 'bySpecTags',
},
expand: {
messageExamples: true,
},
};
const App = () => <AsyncAPIComponent schema={schema} config={config} />;
render(<App />, document.getElementById("root"));
In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows:
{
schemaID: 'custom-spec',
show: {
sidebar: false,
info: true,
servers: true,
operations: false,
messages: true,
schemas: true,
errors: false,
},
expand: {
messageExamples: true,
},
sidebar: {
showServers: 'byServersTags',
showOperations: 'bySpecTags',
},
publishLabel: 'PUB',
subscribeLabel: 'SUB',
}