# openapi-asyncapi-ui-render

> 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

Latest version **1.0.18** (published 2023-05-04) · MIT License license · 0 weekly downloads

## Install

```sh
npm install openapi-asyncapi-ui-render
pnpm add openapi-asyncapi-ui-render
yarn add openapi-asyncapi-ui-render
bun add openapi-asyncapi-ui-render
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.18 |
| Published | 2023-05-04 |
| First published | 2023-04-02 |
| Weekly downloads | 0 |
| License | MIT License |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sam Ayoub |
| Maintainers | melayyoub |
| Keywords | ddkits, reallexi, dynamic, react, cdn, components, ui, openapi, swagger, async, asyncapi |

## Links

- npm: https://www.npmjs.com/package/openapi-asyncapi-ui-render
- Repository: https://github.com/ddkits/apidocpro-openapi-ui-render
- Homepage: https://ui.apidocpro.com
- Issues: https://github.com/ddkits/apidocpro-openapi-ui-render/issues
- Funding: https://opencollective.com/reallexi
- npm.io page: https://npm.io/package/openapi-asyncapi-ui-render

## Dependencies (9)

- [sass](https://npm.io/package/sass.md) ^1
- [js-yaml](https://npm.io/package/js-yaml.md) ^4
- [polyfills](https://npm.io/package/polyfills.md) ^2
- [prop-types](https://npm.io/package/prop-types.md) ^15
- [web-vitals](https://npm.io/package/web-vitals.md) ^2
- [js-beautify](https://npm.io/package/js-beautify.md) ^1
- [react-scroll](https://npm.io/package/react-scroll.md) ^1
- [react-scripts](https://npm.io/package/react-scripts.md) ^5
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.18 (latest) — 2023-05-04
- 1.0.17 — 2023-05-03
- 1.0.16 — 2023-05-03
- 1.0.15 — 2023-04-13
- 1.0.14 — 2023-04-13
- 1.0.13 — 2023-04-12
- 1.0.9 — 2023-04-08
- 1.0.8 — 2023-04-08
- 1.0.7 — 2023-04-07
- 1.0.6 — 2023-04-06
- 1.0.4 — 2023-04-06
- 1.0.3 — 2023-04-02
- 1.0.2 — 2023-04-02

## 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, APIDOCPROTHEME} from 'openapi-asyncapi-ui-render'
// Custom Theme can be clones from Default example when needed
import {ApiDocPro, APIDOCPROTHEME} from 'openapi-asyncapi-ui-render/dist/components'

...

   <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

![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.17.25%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.17.43%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.17.53%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.17.58%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.18.04%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.18.21%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.18.43%20PM.png)
![apidocpro UI openapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/APIDocpro-UIat%2010.19.00%20PM.png)
![apidocpro UI swagger render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/swagger.png)
![apidocpro UI openapi example 1 render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/example2.png)
![apidocpro UI openapi example 2 render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/example1.png)

## AsyncAPI

![apidocpro UI Asyncapi render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/asyncapi1.png)
![apidocpro UI Asyncapi Kafka render](https://github.com/ddkits/apidocpro-openapi-ui-render/raw/main/screenshots/kafka-asyncapi.png)

```
/* 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'


```



#### By Sam Ayoub

##### APIDocPro.com

---
_Source: https://npm.io/package/openapi-asyncapi-ui-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._