Swagger-ui: How to enable deepLinking when using swagger-ui-react

[acelaya]

Q&A (please complete the following information)

• OS: Linux
• Browser: Chrome
• Version: 76
• Method of installation: npm
• Swagger-UI version: 3.23.6
• Swagger/OpenAPI version: Swagger 2.0 and OpenAPI 3.0

Swagger-UI configuration options:

import SwaggerUI from 'swagger-ui-react'

export default () => <SwaggerUI url={url} docExpansion="list" deepLinking={true} />

How can we help?

I'm trying to use swagger-ui-react inside a react application and according to the documentation, it seems the amount of supported options is quite reduced compared to what swagger-ui supports.

I was specially trying to enable deeplinking, but apparently any prop other than the 5 which are documented are ignored.

Is there any way to define these props?

[acelaya]

I want to notice that adding the ?deepLinking=true query string, it works just fine, but I would like to avoid that.

I've seen in this docs that it is also possible to pass config by having a swagger-config.yaml file in the root of the project. Does that mean in the document root? Is swagger-ui going to try to fetch it?

[acelaya]

For the moment, I'm using my own implementation of the component.

I can provide a PR if you want to officialy support this option at some point.

[volbrene]

@acelaya Hi, can you make your solution available to me? I would also like to include deeplinking in my swagger ui component.

[acelaya]

Sure @volbrene

Here it is https://github.com/shlinkio/shlink-api-spec-ui/blob/master/src/components/swagger-ui-react/index.js#L25

I copied the component and exposed a new prop, that's it.

It should be easy to add to the official codebase.

[volbrene]

Thanks, but I have no understanding why the official people don't react to this.. because its so easy to implement it....

But it's great of you to show me the solution.
Thank you.

[acelaya]

Well, I can imagine it could have some side effects and it could be hard to make it compatible with pages including other components.

In my case, the swagger UI is mostly everything in the page, so it's ok to have this, but there's probably many other use cases.

At the end of the day OSS maintainers need to carefully decide which features they want to maintain.

[samarthd]

Leaving a comment here for anyone else who may be wondering about deepLinking support.

Official support for deepLinking as a prop was added in this PR: https://github.com/swagger-api/swagger-ui/pull/6424

According to the release information, seems like starting in 3.35.0 (October 1, 2020), these changes are available: https://github.com/swagger-api/swagger-ui/releases/tag/v3.35.0

Note that @types/swagger-ui-react has not been updated with these changes and thus a @ts-ignore comment may be necessary for those using TypeScript.

@tim-lai I think this issue can be closed, but maybe one needs to be opened for the TypeScript changes?

[acelaya]

Thanks for letting us know @samarthd

[acelaya]

I have just tested it with latest swagger-ui-react, and it works perfectly. I was able to drop the component I was maintaining myself :slightly_smiling_face:

Also, at the moment of writing this, @types/swagger-ui-react already supports the property.

So closing this.