openapi-asyncapi-ui-render
v1.0.18
Published
API Doc Pro UI is the best choice for dynamically rendering any spec SwaggerAPI, OpenAPI, or AsyncAPI, all in one with one design. By Reallexi LLC @ Apidocpro.com
Downloads
32
Maintainers
Readme
Getting Started with APIDocPro UI renderrer for Swagger, OpenAPI and AsyncAPI
API Doc Pro UI is the best choice for dynamically rendering any spec SwaggerAPI, OpenAPI, or AsyncAPI, all in one with one design. By Reallexi LLC @ Apidocpro.com
Documentation and live demo
https://ui.apidocpro.com
Get started
npm i openapi-asyncapi-ui-render
- React
...
// React Component
import { ApiDocPro } from 'openapi-asyncapi-ui-render';
// Custom Theme can be clones from Default example when needed
import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/green/green';
// import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/noTheme/noTheme';
// import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/default/default';
...
<ApiDocPro
title="APIDocPro OpenAPI/AysncAPI UI"
rightRegion // Bool default true
leftRegion // Bool default true
header // Bool default true
theme={APIDOCPROTHEME} // Object of const default can be clones for new theme design or contribute
spec={spec} // string
/>
...
Funding / sponsors
https://opencollective.com/reallexi
Based on:
- 1- ReactS
- 2- Bootstrap
Features
- Features:
- 1- Code snippets
- 2- Logical design of parameters
- 3- Auto generate Examples from Parameters
- 4- Easy control of the design
- 5- Custom theming is simpler than ever, no need to be an expert in React to redesign
- 6- 3,2,1 columns by the need
OpenAPI
AsyncAPI
/* eslint-disable no-unused-vars */
// import logo from './logo.svg';
import { useEffect, useState } from 'react';
import './App.css';
import { ApiDocPro } from 'openapi-asyncapi-ui-render';
// Custom Theme can be clones from Default example when needed
import * as THEME from 'openapi-asyncapi-ui-render/theme/default/default';
// Styles import
import 'openapi-asyncapi-ui-render/templates/theme/default/assets/styles/apidocpro-styles.scss';
function App() {
const [spec, setSpec] = useState('');
const [loading, setLoading] = useState(true);
const fetchAPIFile = (url) => {
fetch(url)
.then((response) => response.text())
.then((data) => {
setSpec(data);
setLoading(false);
});
};
useEffect(() => {
setLoading(true);
fetchAPIFile('/examples/asyncapi.json');
}, []);
return loading ? (
<div className="App">
{' '}
<div className="container justify-content-middle">
<i className="fa-solid fa-sync fa-spin"></i>
</div>
</div>
) : (
<div className="App">
<ApiDocPro
title="APIDocPro OpenAPI/AysncAPI UI"
rightRegion // Bool default true
leftRegion // Bool default true
header // Bool default true
theme={THEME} // Object of const default can be clones for new theme design or contribute
spec={spec} // string
/>
</div>
);
}
export default App;
Themes available
- APIDOCPROTHEME : default
- APIDOCPROTHEMEGREEN : Green style
- APIDOCPRONOTHEME : no extra styles
import { ApiDocPro } from 'openapi-asyncapi-ui-render'
// or
import { ApiDocPro } from 'openapi-asyncapi-ui-render/dist/components'