swagger ui topbar plugin react ts

Question

I am using webpack as my bundler. I am trying to integrate the swagger UI for multiple urls. "swagger-ui": "3.51.2".

import React from "react";
import SwaggerUi, { presets } from "swagger-ui";

// eslint-disable-next-line import/extensions
import SWaggerUiStandalonePreset from "swagger-ui/dist/swagger-ui-standalone-preset.js";

import "swagger-ui/dist/swagger-ui.css";

const Swagger: React.FC = () => {
  
  React.useEffect(() => {
    SwaggerUi({
      dom_id: "#swaggerContainer",
      urls: [
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test1",
        },
        {
          url: `http://petstore.swagger.io/v2/swagger.json`,
          name: "test2",
        },
      ],
      presets: [presets.apis, SWaggerUiStandalonePreset],
      plugins: [SwaggerUi.plugins.Topbar],
    });
  });

  return <div id="swaggerContainer" />;
};

export default Swagger;

I am doing something like this and it says, no api definitions found! but if i do just url instead of urls, it works?

How to display something with the topbar plugin?

Answer 1

just in case somebody gets stuck, try this

 React.useEffect(() => {
    SwaggerUi({
      dom_id: "#swaggerContainer",
      urls: [
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test1",
        },
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test2",
        },
      ],
      plugins: [SWaggerUiStandalonePreset],
      layout: "StandaloneLayout",
    });
  });

  return <div id="swaggerContainer" />;
};