SwaggerUI features a powerful Plugin API that gives user the ability to customize and extend functionality and layout.
This demo provides examples of the following:
- Custom Logo and Nav Bar
- Custom Layout that moves the Filter Input Bar above the API definition
- Use of state change to toggle the Custom Logo and Mode Text
- Custom color scheme
- Extended Filter functionality
Specifically, from the SwaggerUI Plugin API, we:
- wrapActions
- wrapComponents
- create custom actions, selectors, reducers
This repo has step-by-step development branches to make it easier to follow progression.
1-logo-and-colors - Setup the initial plugin. Apply custom logo and colors
2-toggleword-and-state - Enable mode toggle via the TopBar. Setup Redux state in TopBar. Test via console.log or Redux Dev Tools (Chrome Extension)
3-filter-container - Display a cloned FilterContainer beneath the TopBar. Since we are using a cloned FilterContainer, we set it to always display via layoutActions.updateFilter(true)
4-ops-filter - New advanced filter function, along with a wrapped Operations component to call our filterByOpsMethodAndOperation instead of the default fn.opsFilter
5-toggle-logo-with-state - Visible UI changes when toggling state, a continuation from 2-toggleword-and-state. Also, reorganize filenames for better consistency, though it might be a bit harder to follow with name changes.
Install dependencies:
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Toggle keywords can be used in place of changing the location of the API definition. Use of a toggle keyword will change state without reloading the API definition. While the toggle keywords are tied to working Redux state, they are not feature complete yet.
Example toggle keywords with a visual change: hordemode and alliancemode can be used to toggle the faction state, instead of clicking on the faction state text.
Incomplete toggle keywords: wowmode, swaggermode
Swagger UI Plugin system overview
OpenAPI 2 Specification, aka Swagger 2.0
This project was bootstrapped with Create React App.
This project is licensed under the MIT License.