Support for customisation in swagger-ui-react?

[d1ndra]

Q&A (please complete the following information)

• OS: All
• Browser: All
• Version: 3.x
• Method of installation: npm
• Swagger-UI version: 3.x
• Swagger/OpenAPI version: OAS 3.0

How can we help?

Support for configuration in swagger-ui-react? Would like to be able to use a customised layout of swagger-ui within a react appliction with try out enabled. Issue #4745 seems to be fixed in swagger-ui-react but doesn't allow configuration. Is there any recommended way to have a customised layout within a react app? @shockey

Alternatively are there any timelines for the support of custom plugins in swagger-ui-react?

[tmkasun]

I'm also looking to implement this, We had to switch to swager-ui-react distribution because of this limitation #4745 , But then we hit with this problem where we couldn't use any plugins,

I think this #5258 issue is also requesting the same change.

I tried to add the plugins and presets configs into here index.js#L13 , but it didn't work. Got the following exception.

TypeError: Cannot read property 'getLocalConfig' of undefined
    at downloadSpec (swagger-ui.js?4d77:1)
    at SwaggerUI (swagger-ui.js?4d77:1)
    at SwaggerUI.componentDidMount (index.js?4b6f:89)
    at commitLifeCycles (react-dom.development.js?61bb:17334)
    at commitAllLifeCycles (react-dom.development.js?61bb:18736)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at commitRoot (react-dom.development.js?61bb:18948)
    at eval (react-dom.development.js?61bb:20418)

Then I tried to debug the code and check , but no luck in debuging it, with dev builds , source-mapping not working correctly.

Appreciate your help to make this work.

[silverwind]

First, great work on swagger-ui-react, it solves quite a few issues related to embedding in React 👍

Would like to request the following properties to be made configurable:

• validatorUrl
• preauthorizeBasic
• preauthorizeApiKey

[sigilworks]

Yes, the ability to customize the layout is a real brick wall for my use case. Been sitting here for 15 minutes wondering why it wasn't picking up the example in the customization doc until I saw that those props aren't being passed through in componentDidMount...

[drschulz]

Custom layout is also something that would be great for our use case. We'd love to use the UI provided by your library but have pretty specific components we also need to show within our api explorer. Custom Layouts seems like a perfect use case for this.

[manjula-dube]

Hi Would, Are you planning to support customizable UI, which would be more accessible as well using swagger-ui-react If yes by when are you planning to do so ?

[rahulbot]

For folks wanted to customize preauthorizeApiKey with swagger-ui-react, you can do this via the onComplete callback. That callback gives you the swaggerUI object to work with. This works for me:

<SwaggerUi
  url={specUrl}
  onComplete={(swaggerUi) => {
    swaggerUi.preauthorizeApiKey('key', userKey);
  }}
/>

[exit99]

This ever get solved? Would be real nice to have custom layouts