config-modification.md

Configuration Modification

Overview

Learn how to use various configuration options available in ConfigInterface.

Definition

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.

Examples

See exemplary component configuration in TypeScript and JavaScript.

TypeScript

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"));

JavaScript

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',
}