node.jsreactjsexpressswaggernodejs-express-server

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 there another method to pass the JSON content and have it displayed 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} />