swagger-ui-react is a specialized React component that seamlessly integrates Swagger UI directly into React applications. It exposes the full capabilities of Swagger UI through a simple React component, `SwaggerUI`. Unlike the core Swagger UI distribution, this package declares `react` and `react-dom` (versions >=16.8.0 <20) as peer dependencies, ensuring compatibility with existing React environments. The package's versioning closely mirrors the underlying Swagger UI, with the current stable release being 5.32.4. It receives frequent updates, including bug fixes, performance enhancements, and crucial security patches, as demonstrated by recent releases addressing several CVEs and introducing features like basic OpenAPI 3.2.0 support and dark mode. A notable aspect is the inclusion of anonymized installation analytics via Scarf, which users can easily opt out of through `package.json` settings or an environment variable. Developers should be mindful of specific prop behaviors, such as `layout` and `docExpansion` applying only on initial mount, and the mutual exclusivity of the `spec` and `url` props.
npm install swagger-ui-reactVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to integrate `SwaggerUI` into a React component, loading an OpenAPI specification from a URL, applying initial documentation expansion settings, and including basic interceptor and completion callbacks. It also shows a common pattern for defining the API URL via environment variables.
Consult the official Swagger UI release notes for breaking changes before upgrading. Test thoroughly in a staging environment.
Always use either `spec` (for inline JSON/YAML) OR `url` (for remote fetching), but never both simultaneously.
If dynamic changes to these specific props are required, consider remounting the `SwaggerUI` component (e.g., by changing its `key` prop) or explore using the Swagger UI system object obtained via `onComplete` for programmatic control.
To opt out, set `"scarfSettings": { "enabled": false }` in your `package.json` or set the environment variable `SCARF_ANALYTICS=false` during installation.Ensure you are on the latest patch release to benefit from security updates. Review the changelog for specific dependency bumps.
Add `import "swagger-ui-react/swagger-ui.css";` to your component or main application file to ensure styles are loaded.
Ensure you are using `import SwaggerUI from "swagger-ui-react";` for the default export.
Install `react` and `react-dom` in your project with versions compatible with `swagger-ui-react` (e.g., `npm install react react-dom`). The current peer dependency range is `>=16.8.0 <20`.
Ensure that props passed to `SwaggerUI` are stable during a render. If `url` or `spec` need to change, ensure the change is triggered by a user interaction or a state update outside of the direct render function flow, or consider using `React.memo` or `useMemo` for complex prop values.