How do render swagger.json content in reactjs

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 their another method to pass the json content and have it display in Swagger UI?

>Solution :

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} />