2

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?

DanOPT
  • 128
  • 2
  • 13
user2570135
  • 2,669
  • 6
  • 50
  • 80
  • 1
    "In the docs," what docs? Can you be more precise about your actual code? Are you using https://www.npmjs.com/package/swagger-ui-react? If so, then you can use the [`spec`](https://www.npmjs.com/package/swagger-ui-react#user-content-spec-proptypesobject) props to pass direct data instead of URL – indyteo Mar 01 '23 at 02:27
  • Sorry. Yes I am using npmjs.com/package/swagger-ui-react and I have the json string not a link. – user2570135 Mar 01 '23 at 02:30

1 Answers1

2

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} />
indyteo
  • 350
  • 2
  • 13