React Custom Layout

[wregis]

Q&A

• OS: any
• Browser: any
• Version: any
• Method of installation: npm
• Swagger-UI version: 3.28.0
• Swagger/OpenAPI version: any

Content & configuration

None yet

Swagger/OpenAPI definition:
Using pet store sample definition

Swagger-UI configuration options:

SwaggerUI({
  dom_id: '#root',
  url: "https://petstore.swagger.io/v2/swagger.json",
  plugins: [ MyLayoutPlugin ],
  layout: "MyLayout"
})

How can we help?

It was not clear to me how to customize the UI appearance.

It seems that React is the recommended way to do so, but the SwaggerUI from swagger-ui-react component does not expose a "layout" property as the function from swagger-ui. If there's a way to go beyond this, will I be able to update the url property dynamically?

I want to make an API doc able to list multiple definition (based on client and version) through a list and with the functional method, I can't figure out a elegant way to achieve that.

The getComponent property is also not clear to me on which components are available. Is the only way to know that to read the entire source code?

[cbo100]

See #5367 for more discussion

[tim-lai]

@wregis If you are able to use swagger-ui instead of swagger-ui-react, you can create a SwaggerUI plugin that replaces and/or extends the BaseLayout. For example, swagger-editor is a plugin to swagger-ui, and uses a "custom" layout. Documentation for SwaggerUI Plugin API can be found here: https://swagger.io/docs/open-source-tools/swagger-ui/customization/overview/

As noted by others, swagger-ui-react does not currently support custom layout.