swagger-ui-react is a flavor of Swagger UI suitable for use in React applications.
It has a few differences from the main version of Swagger UI:
react-domas peerDependencies instead of production dependencies
- Exports a component instead of a constructor function
Versions of this module mirror the version of Swagger UI included in the distribution.
$ npm i --save swagger-ui-react
Use it in your React application:
import SwaggerUI from "swagger-ui-react" import "swagger-ui-react/swagger-ui.css" export default App = () => <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />
These props map to Swagger UI configuration options of the same name.
url - unpredictable behavior may occur.
Remote URL to an OpenAPI document that Swagger UI will fetch, parse, and display.
spec - unpredictable behavior may occur.
The name of a component available via the plugin system to use as the top-level layout for Swagger UI. The default value is
(system) => void
A callback function that is triggered when Swagger-UI finishes rendering an OpenAPI document.
system object is passed as an argument.
req => reqor
req => Promise<req>.
A function that accepts a request object, and returns either a request object or a Promise that resolves to a request object.
res => resor
res => Promise<res>.
A function that accepts a response object, and returns either a response object or a Promise that resolves to a response object.
docExpansion: PropTypes.oneOf(['list', 'full', 'none'])
Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default value is 'list'.
The default expansion depth for models (set to -1 completely hide the models).
defaultModelRendering: PropTypes.oneOf(["example", "model"])
Controls how the model is shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Example Value' links.) The default value is 'example'.
Controls the display of operationId in operations list. The default is false.
An array of objects that augment and modify Swagger UI's functionality. See Swagger UI's Plugin API for more details.
supportedSubmitMethods: PropTypes.arrayOf(PropTypes.oneOf(['get', 'put', 'post', 'delete', 'options', 'head', 'patch', 'trace']))
HTTP methods that have the Try it out feature enabled. An empty array disables Try it out for all operations. This does not filter the operations from the display.
Controls the display of vendor extension (
x-) fields and values for Operations, Parameters, Responses, and Schema.
If set to
true, uses the mutated request returned from a requestInterceptor to produce the curl command in the UI, otherwise the request before the requestInterceptor was applied is used.
An array of functions that augment and modify Swagger UI's functionality. See Swagger UI's Plugin API for more details.
Controls whether the "Try it out" section should start enabled. The default is false.
Controls the display of the request duration (in milliseconds) for "Try it out" requests. The default is false.
filter: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be Boolean to enable or disable, or a string, in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag. See Swagger UI's Plug Points to customize the filtering behavior.
Enables the request snippet section. When disabled, the legacy curl snippet will be used. The default is false.
Configures the request snippet core plugin. See Swagger UI's Display Configuration for more details.
If set, it persists authorization data and it would not be lost on browser close/refresh. The default is false.
If set to
true, enables passing credentials, as defined in the Fetch standard, in CORS requests that are sent by the browser. Note that Swagger UI cannot currently set cookies cross-domain (see swagger-js#1163) - as a result, you will have to rely on browser-supplied cookies (which this setting enables sending) that Swagger UI cannot control.
Redirect url given as parameter to the oauth2 provider. Default the url refers to oauth2-redirect.html at the same path as the Swagger UI is available.
- Not all configuration bindings are available.
- Some props are only applied on mount, and cannot be updated reliably.
- OAuth redirection handling is not supported.
- Topbar/Standalone mode is not supported.
- Custom plugins are not supported.
We intend to address these limitations based on user demand, so please open an issue or pull request if you have a specific request.
package.jsonin the same folder as this README is not the manifest that should be used for releases - another manifest is generated at build-time and can be found in
For anything else, check the Swagger-UI repository.