How do render swagger.json content in reactjs

Question

I am trying to create a document portal for my API's with Express and reactJs. Basically, I get the JSON content(swagger.json) from the Express server and I want to pass it to swagger UI on the client to display

In the docs (https://www.npmjs.com/package/swagger-ui-react), I only see an option to display the URL.

render() {
        return <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />;
      }

I have the JSON content. Is there another method to pass the JSON content and have it displayed in Swagger UI?

Answer 1

According their docs, you can pass content directly using the spec props:

spec: PropTypes.object

An OpenAPI document respresented as a JavaScript object, JSON string, or YAML string for Swagger UI to display.

⚠️ Don't use this in conjunction with url - unpredictable behavior may occur.

Example:

<SwaggerUI spec={jsonData} />