If you are not using React you may want to use the Standalone Bundle of AsyncAPI component with ReactDOM package onboard. It makes it possible to render a component in any other web framework of your choice or in the static HTML webpage.
Run this command to install the component in your project:
npm install --save @asyncapi/react-componentCheck how to use the Standalone bundle in:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css">
</head>
<body>
<div id="asyncapi"></div>
<script src="https://unpkg.com/@asyncapi/react-component@latest/browser/standalone/index.js"></script>
<script>
AsyncApiStandalone.render({
schema: {
url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml',
options: { method: "GET", mode: "cors" },
},
config: {
show: {
sidebar: true,
}
},
}, document.getElementById('asyncapi'));
</script>
</body>
</html>The Standalone Bundle exports two functions:
render, which works like ReactDOM.render function, where first argument is the props for component and the second is the HTML Node,hydrate, which works like ReactDOM.hydrate function, where first argument is the props for component and the second is the HTML Node.
NOTE: The Standalone Bundle takes this same props as the normal React component.
NOTE: If there are several components on one page, each one will be rendered using its own properties.
NOTE: If you don't need ParserJS inside component, you can use the bundle from
.../browser/standalone/without-parser.jspath of the package.