@asyncapi/react-component
Advanced tools
React component for AsyncAPI specification. Available also as a Web Component, but not only.
The official React component for AsyncAPI specification. It allows you to render the documentation of your asynchronous API provided in the AsyncAPI specification format and validate this specification. You can fully restyle the component using your own styles.
react (version 16.8.0 or higher)Run this command to install the component in your project:
npm install --save @asyncapi/react-component
Check out this sandbox application that uses the React component:
Check a simple example which shows passing the inline AsyncAPI specification with custom configurations:
import * as React from "react";
import { render } from "react-dom";
import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component";
const schema = `
asyncapi: '2.0.0'
info:
title: Example
version: '0.1.0'
channels:
example-channel:
subscribe:
message:
payload:
type: object
properties:
exampleField:
type: string
exampleNumber:
type: number
exampleDate:
type: string
format: date-time
`;
const config: ConfigInterface = {
schemaID: 'custom-spec',
show: {
operations: false,
errors: false,
},
};
const App = () => <AsyncApiComponent schema={schema} config={config} />;
render(<App />, document.getElementById("root"));
To check how to use web-component or use a component in other technologies see:
The list of props for the AsyncAPI React component includes:
schema: string | AsyncAPIDocument | object | FetchingSchemaInterface
The schema property is required and contains AsyncAPI specification. Use the string type, the AsyncAPIDocument type, parsed specification as JS object from AsyncAPI Parser or the FetchingSchemaInterface object to fetch the schema from an external resource. For more information on what it contains and what it should look like, read AsyncAPI Specification.
config?: Partial<ConfigInterface>
The config property is optional and contains configuration for the AsyncAPI component. For more information on the available configuration options, read the Configuration Modification document.
This property is concatenated with the default configuration.
NOTE: The
Partial<T>type means that every field in theTtype is optional.
For a list and description of features offered by the AsyncAPI React component, see this directory.
To use default styles import them as follows:
import "@asyncapi/react-component/styles/default.css";
// or minified version
import "@asyncapi/react-component/styles/default.min.css";
The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom font-family and other styling.
This can be done by defining the styles in a file or inline using a <style> tag in the <head> section of the page where you are using AsyncAPI React component.
Example custom styles (defined in the styles/custom.css file):
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.
import "styles/custom.css";
import "@asyncapi/react-component/styles/default.min.css";
If you are using the standalone bundle, you can put the custom styles as a style sheet link or as an inline style in the <head> section of the HTML code:
<head>
<!-- Custom style sheet -->
<link rel="stylesheet" href="./styles/custom.css">
<!-- OR as inline style -->
<style>
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
</style>
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css">
...
</head>
The AsyncAPI component supports the option to use a custom logo. By using the x-logo custom extension in the InfoObject, a logo will be shown in the top left corner.
NOTE: The logo will only appear if the sidebar option is enabled.
asyncapi: 2.2.0
info:
title: Account Service
version: 1.0.0
description: This service is in charge of processing user signups.
x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
channels:
...
This repository comes in with a Playground application. Test it to see the component in action and play with it before you use it in your application.
You can also run the Playground application locally by following this instruction from the development guide.
The @asyncapi/react-component package has 3 crafted JS modules to be used in various environments:
esm (ECMAScript Modules) is intended for use in a single-page applications with predefined environments like create-react-app that are capable of resolving dependencies (via Webpack, Browserify, etc). It can also be used on the server side (for tasks like Server Side Rendering) when the application is using esm.cjs (CommonJS Modules) similar uses as for esm modules, but using CommonJS modules.umd (Universal Module Definition) is a dependency-free module that includes everything you need to serve AsyncAPI documentation (however React and ReactDOM dependencies must be served separately) on a single-page application that can't resolve npm module dependencies or in normal HTML page. We have 2 types of minified umd bundles, with and without AsyncAPI Parser in paths:
@asyncapi/react-component/browser/index.js@asyncapi/react-component/browser/without-parser.jsFor information on how to set up a development environment, write and run tests, follow the naming and architecture convention defined for the project in the Development Guide.
If you have a feature request, add it as an issue or propose changes in a pull request (PR).
If you create a feature request, use the dedicated Feature request issue template. When you create a PR, follow the contributing rules described in the CONTRIBUTING.md document.
If you have a bug to report, reproduce it in an online code editor. For example, use CodeSandbox. Attach the link to the reproduced bug to your issue. Log the bug using the Bug report template.
The project was originally developed under the Kyma project, in 2019 it was moved under AsyncAPI Initiative.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A React component for AsyncAPI specification.
The npm package @asyncapi/react-component receives a total of 75,495 weekly downloads. As such, @asyncapi/react-component popularity was classified as popular.
We found that @asyncapi/react-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
