@asyncapi/react-component 1.0.0-next.5 → 1.0.0-next.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (286) hide show
  1. package/README.md +75 -4
  2. package/browser/index.js +32 -14
  3. package/browser/index.js.LICENSE.txt +88 -0
  4. package/browser/standalone/index.js +32 -0
  5. package/browser/standalone/index.js.LICENSE.txt +112 -0
  6. package/browser/standalone/without-parser.js +14 -0
  7. package/browser/standalone/without-parser.js.LICENSE.txt +110 -0
  8. package/browser/without-parser.js +14 -12
  9. package/browser/without-parser.js.LICENSE.txt +86 -0
  10. package/lib/cjs/components/Bindings.js +12 -4
  11. package/lib/cjs/components/Bindings.js.map +1 -1
  12. package/lib/cjs/components/CollapseButton.js +11 -7
  13. package/lib/cjs/components/CollapseButton.js.map +1 -1
  14. package/lib/cjs/components/Extensions.js +4 -3
  15. package/lib/cjs/components/Extensions.js.map +1 -1
  16. package/lib/cjs/components/Href.js +2 -1
  17. package/lib/cjs/components/Href.js.map +1 -1
  18. package/lib/cjs/components/JSONSnippet.js +17 -0
  19. package/lib/cjs/components/JSONSnippet.js.map +1 -0
  20. package/lib/cjs/components/Markdown.js +4 -4
  21. package/lib/cjs/components/Markdown.js.map +1 -1
  22. package/lib/cjs/components/Schema.js +75 -58
  23. package/lib/cjs/components/Schema.js.map +1 -1
  24. package/lib/cjs/components/Tag.js +3 -2
  25. package/lib/cjs/components/Tag.js.map +1 -1
  26. package/lib/cjs/components/Tags.js +2 -1
  27. package/lib/cjs/components/Tags.js.map +1 -1
  28. package/lib/cjs/components/index.js +6 -2
  29. package/lib/cjs/components/index.js.map +1 -1
  30. package/lib/cjs/config/config.js.map +1 -1
  31. package/lib/cjs/config/default.js +9 -1
  32. package/lib/cjs/config/default.js.map +1 -1
  33. package/lib/cjs/config/index.js +5 -1
  34. package/lib/cjs/config/index.js.map +1 -1
  35. package/lib/cjs/constants.js +5 -48
  36. package/lib/cjs/constants.js.map +1 -1
  37. package/lib/cjs/containers/AsyncApi/AsyncApi.js +8 -2
  38. package/lib/cjs/containers/AsyncApi/AsyncApi.js.map +1 -1
  39. package/lib/cjs/containers/AsyncApi/Layout.js +33 -21
  40. package/lib/cjs/containers/AsyncApi/Layout.js.map +1 -1
  41. package/lib/cjs/containers/AsyncApi/Standalone.js +8 -2
  42. package/lib/cjs/containers/AsyncApi/Standalone.js.map +1 -1
  43. package/lib/cjs/containers/Error/Error.js +4 -3
  44. package/lib/cjs/containers/Error/Error.js.map +1 -1
  45. package/lib/cjs/containers/Info/Info.js +11 -10
  46. package/lib/cjs/containers/Info/Info.js.map +1 -1
  47. package/lib/cjs/containers/Messages/Message.js +23 -10
  48. package/lib/cjs/containers/Messages/Message.js.map +1 -1
  49. package/lib/cjs/containers/Messages/MessageExample.js +26 -14
  50. package/lib/cjs/containers/Messages/MessageExample.js.map +1 -1
  51. package/lib/cjs/containers/Messages/Messages.js +11 -7
  52. package/lib/cjs/containers/Messages/Messages.js.map +1 -1
  53. package/lib/cjs/containers/Operations/Operation.js +73 -37
  54. package/lib/cjs/containers/Operations/Operation.js.map +1 -1
  55. package/lib/cjs/containers/Operations/Operations.js +16 -13
  56. package/lib/cjs/containers/Operations/Operations.js.map +1 -1
  57. package/lib/cjs/containers/Schemas/Schema.js +21 -0
  58. package/lib/cjs/containers/Schemas/Schema.js.map +1 -0
  59. package/lib/cjs/containers/Schemas/Schemas.js +28 -0
  60. package/lib/cjs/containers/Schemas/Schemas.js.map +1 -0
  61. package/lib/cjs/containers/Servers/Security.js +150 -0
  62. package/lib/cjs/containers/Servers/Security.js.map +1 -0
  63. package/lib/cjs/containers/Servers/Server.js +15 -8
  64. package/lib/cjs/containers/Servers/Server.js.map +1 -1
  65. package/lib/cjs/containers/Servers/Servers.js +7 -4
  66. package/lib/cjs/containers/Servers/Servers.js.map +1 -1
  67. package/lib/cjs/containers/Sidebar/Sidebar.js +213 -140
  68. package/lib/cjs/containers/Sidebar/Sidebar.js.map +1 -1
  69. package/lib/cjs/contexts/index.js +6 -1
  70. package/lib/cjs/contexts/index.js.map +1 -1
  71. package/lib/cjs/contexts/useConfig.js +10 -0
  72. package/lib/cjs/contexts/useConfig.js.map +1 -0
  73. package/lib/cjs/contexts/useSpec.js +7 -3
  74. package/lib/cjs/contexts/useSpec.js.map +1 -1
  75. package/lib/cjs/helpers/common.js +17 -0
  76. package/lib/cjs/helpers/common.js.map +1 -0
  77. package/lib/cjs/helpers/index.js +7 -4
  78. package/lib/cjs/helpers/index.js.map +1 -1
  79. package/lib/cjs/helpers/marked.js +34 -0
  80. package/lib/cjs/helpers/marked.js.map +1 -0
  81. package/lib/cjs/helpers/message.js +39 -9
  82. package/lib/cjs/helpers/message.js.map +1 -1
  83. package/lib/cjs/helpers/parser.js +14 -15
  84. package/lib/cjs/helpers/parser.js.map +1 -1
  85. package/lib/cjs/helpers/schema.js +157 -135
  86. package/lib/cjs/helpers/schema.js.map +1 -1
  87. package/lib/cjs/helpers/server.js +49 -0
  88. package/lib/cjs/helpers/server.js.map +1 -1
  89. package/lib/cjs/helpers/specification.js +36 -21
  90. package/lib/cjs/helpers/specification.js.map +1 -1
  91. package/lib/cjs/index.js +3 -1
  92. package/lib/cjs/index.js.map +1 -1
  93. package/lib/cjs/types.js +4 -51
  94. package/lib/cjs/types.js.map +1 -1
  95. package/lib/cjs/without-parser.js +3 -0
  96. package/lib/cjs/without-parser.js.map +1 -1
  97. package/lib/esm/components/Bindings.js +10 -3
  98. package/lib/esm/components/Bindings.js.map +1 -1
  99. package/lib/esm/components/CollapseButton.js +9 -6
  100. package/lib/esm/components/CollapseButton.js.map +1 -1
  101. package/lib/esm/components/Extensions.js +2 -2
  102. package/lib/esm/components/Extensions.js.map +1 -1
  103. package/lib/esm/components/Href.js.map +1 -1
  104. package/lib/esm/components/JSONSnippet.js +10 -0
  105. package/lib/esm/components/JSONSnippet.js.map +1 -0
  106. package/lib/esm/components/Markdown.js +2 -3
  107. package/lib/esm/components/Markdown.js.map +1 -1
  108. package/lib/esm/components/Schema.js +69 -57
  109. package/lib/esm/components/Schema.js.map +1 -1
  110. package/lib/esm/components/Tag.js +1 -1
  111. package/lib/esm/components/Tag.js.map +1 -1
  112. package/lib/esm/components/Tags.js.map +1 -1
  113. package/lib/esm/components/index.js +1 -1
  114. package/lib/esm/components/index.js.map +1 -1
  115. package/lib/esm/config/config.js.map +1 -1
  116. package/lib/esm/config/default.js +9 -1
  117. package/lib/esm/config/default.js.map +1 -1
  118. package/lib/esm/config/index.js.map +1 -1
  119. package/lib/esm/constants.js +3 -47
  120. package/lib/esm/constants.js.map +1 -1
  121. package/lib/esm/containers/AsyncApi/AsyncApi.js +2 -0
  122. package/lib/esm/containers/AsyncApi/AsyncApi.js.map +1 -1
  123. package/lib/esm/containers/AsyncApi/Layout.js +28 -20
  124. package/lib/esm/containers/AsyncApi/Layout.js.map +1 -1
  125. package/lib/esm/containers/AsyncApi/Standalone.js +3 -1
  126. package/lib/esm/containers/AsyncApi/Standalone.js.map +1 -1
  127. package/lib/esm/containers/Error/Error.js +2 -2
  128. package/lib/esm/containers/Error/Error.js.map +1 -1
  129. package/lib/esm/containers/Info/Info.js +8 -8
  130. package/lib/esm/containers/Info/Info.js.map +1 -1
  131. package/lib/esm/containers/Messages/Message.js +21 -9
  132. package/lib/esm/containers/Messages/Message.js.map +1 -1
  133. package/lib/esm/containers/Messages/MessageExample.js +19 -13
  134. package/lib/esm/containers/Messages/MessageExample.js.map +1 -1
  135. package/lib/esm/containers/Messages/Messages.js +10 -7
  136. package/lib/esm/containers/Messages/Messages.js.map +1 -1
  137. package/lib/esm/containers/Operations/Operation.js +72 -38
  138. package/lib/esm/containers/Operations/Operation.js.map +1 -1
  139. package/lib/esm/containers/Operations/Operations.js +15 -13
  140. package/lib/esm/containers/Operations/Operations.js.map +1 -1
  141. package/lib/esm/containers/Schemas/Schema.js +14 -0
  142. package/lib/esm/containers/Schemas/Schema.js.map +1 -0
  143. package/lib/esm/containers/Schemas/Schemas.js +21 -0
  144. package/lib/esm/containers/Schemas/Schemas.js.map +1 -0
  145. package/lib/esm/containers/Servers/Security.js +143 -0
  146. package/lib/esm/containers/Servers/Security.js.map +1 -0
  147. package/lib/esm/containers/Servers/Server.js +15 -9
  148. package/lib/esm/containers/Servers/Server.js.map +1 -1
  149. package/lib/esm/containers/Servers/Servers.js +5 -3
  150. package/lib/esm/containers/Servers/Servers.js.map +1 -1
  151. package/lib/esm/containers/Sidebar/Sidebar.js +203 -135
  152. package/lib/esm/containers/Sidebar/Sidebar.js.map +1 -1
  153. package/lib/esm/contexts/index.js +1 -0
  154. package/lib/esm/contexts/index.js.map +1 -1
  155. package/lib/esm/contexts/useConfig.js +6 -0
  156. package/lib/esm/contexts/useConfig.js.map +1 -0
  157. package/lib/esm/contexts/useSpec.js +2 -2
  158. package/lib/esm/contexts/useSpec.js.map +1 -1
  159. package/lib/esm/helpers/common.js +14 -0
  160. package/lib/esm/helpers/common.js.map +1 -0
  161. package/lib/esm/helpers/index.js +2 -3
  162. package/lib/esm/helpers/index.js.map +1 -1
  163. package/lib/esm/helpers/marked.js +27 -0
  164. package/lib/esm/helpers/marked.js.map +1 -0
  165. package/lib/esm/helpers/message.js +38 -8
  166. package/lib/esm/helpers/message.js.map +1 -1
  167. package/lib/esm/helpers/parser.js +15 -13
  168. package/lib/esm/helpers/parser.js.map +1 -1
  169. package/lib/esm/helpers/schema.js +152 -127
  170. package/lib/esm/helpers/schema.js.map +1 -1
  171. package/lib/esm/helpers/server.js +49 -0
  172. package/lib/esm/helpers/server.js.map +1 -1
  173. package/lib/esm/helpers/specification.js +36 -18
  174. package/lib/esm/helpers/specification.js.map +1 -1
  175. package/lib/esm/index.js +2 -1
  176. package/lib/esm/index.js.map +1 -1
  177. package/lib/esm/types.js +2 -46
  178. package/lib/esm/types.js.map +1 -1
  179. package/lib/esm/without-parser.js +2 -0
  180. package/lib/esm/without-parser.js.map +1 -1
  181. package/lib/types/components/Bindings.d.ts.map +1 -1
  182. package/lib/types/components/CollapseButton.d.ts +1 -0
  183. package/lib/types/components/CollapseButton.d.ts.map +1 -1
  184. package/lib/types/components/Extensions.d.ts.map +1 -1
  185. package/lib/types/components/JSONSnippet.d.ts +7 -0
  186. package/lib/types/components/JSONSnippet.d.ts.map +1 -0
  187. package/lib/types/components/Markdown.d.ts.map +1 -1
  188. package/lib/types/components/Schema.d.ts +5 -4
  189. package/lib/types/components/Schema.d.ts.map +1 -1
  190. package/lib/types/components/Tag.d.ts +2 -2
  191. package/lib/types/components/Tag.d.ts.map +1 -1
  192. package/lib/types/components/Tags.d.ts +2 -2
  193. package/lib/types/components/Tags.d.ts.map +1 -1
  194. package/lib/types/components/index.d.ts +1 -1
  195. package/lib/types/components/index.d.ts.map +1 -1
  196. package/lib/types/config/config.d.ts +8 -0
  197. package/lib/types/config/config.d.ts.map +1 -1
  198. package/lib/types/config/default.d.ts.map +1 -1
  199. package/lib/types/constants.d.ts +3 -26
  200. package/lib/types/constants.d.ts.map +1 -1
  201. package/lib/types/containers/AsyncApi/AsyncApi.d.ts +2 -2
  202. package/lib/types/containers/AsyncApi/AsyncApi.d.ts.map +1 -1
  203. package/lib/types/containers/AsyncApi/Layout.d.ts +2 -2
  204. package/lib/types/containers/AsyncApi/Layout.d.ts.map +1 -1
  205. package/lib/types/containers/AsyncApi/Standalone.d.ts +2 -2
  206. package/lib/types/containers/AsyncApi/Standalone.d.ts.map +1 -1
  207. package/lib/types/containers/Info/Info.d.ts.map +1 -1
  208. package/lib/types/containers/Messages/Message.d.ts +3 -2
  209. package/lib/types/containers/Messages/Message.d.ts.map +1 -1
  210. package/lib/types/containers/Messages/MessageExample.d.ts +5 -4
  211. package/lib/types/containers/Messages/MessageExample.d.ts.map +1 -1
  212. package/lib/types/containers/Messages/Messages.d.ts.map +1 -1
  213. package/lib/types/containers/Operations/Operation.d.ts +4 -3
  214. package/lib/types/containers/Operations/Operation.d.ts.map +1 -1
  215. package/lib/types/containers/Operations/Operations.d.ts.map +1 -1
  216. package/lib/types/containers/Schemas/Schema.d.ts +9 -0
  217. package/lib/types/containers/Schemas/Schema.d.ts.map +1 -0
  218. package/lib/types/containers/Schemas/Schemas.d.ts +3 -0
  219. package/lib/types/containers/Schemas/Schemas.d.ts.map +1 -0
  220. package/lib/types/containers/Servers/Security.d.ts +10 -0
  221. package/lib/types/containers/Servers/Security.d.ts.map +1 -0
  222. package/lib/types/containers/Servers/Server.d.ts +2 -2
  223. package/lib/types/containers/Servers/Server.d.ts.map +1 -1
  224. package/lib/types/containers/Servers/Servers.d.ts.map +1 -1
  225. package/lib/types/containers/Sidebar/Sidebar.d.ts +1 -9
  226. package/lib/types/containers/Sidebar/Sidebar.d.ts.map +1 -1
  227. package/lib/types/contexts/index.d.ts +1 -0
  228. package/lib/types/contexts/index.d.ts.map +1 -1
  229. package/lib/types/contexts/useConfig.d.ts +5 -0
  230. package/lib/types/contexts/useConfig.d.ts.map +1 -0
  231. package/lib/types/contexts/useSpec.d.ts +3 -5
  232. package/lib/types/contexts/useSpec.d.ts.map +1 -1
  233. package/lib/types/helpers/common.d.ts +5 -0
  234. package/lib/types/helpers/common.d.ts.map +1 -0
  235. package/lib/types/helpers/index.d.ts +2 -3
  236. package/lib/types/helpers/index.d.ts.map +1 -1
  237. package/lib/types/helpers/marked.d.ts +4 -0
  238. package/lib/types/helpers/marked.d.ts.map +1 -0
  239. package/lib/types/helpers/message.d.ts +4 -3
  240. package/lib/types/helpers/message.d.ts.map +1 -1
  241. package/lib/types/helpers/parser.d.ts.map +1 -1
  242. package/lib/types/helpers/schema.d.ts +16 -12
  243. package/lib/types/helpers/schema.d.ts.map +1 -1
  244. package/lib/types/helpers/server.d.ts +6 -1
  245. package/lib/types/helpers/server.d.ts.map +1 -1
  246. package/lib/types/helpers/specification.d.ts +7 -4
  247. package/lib/types/helpers/specification.d.ts.map +1 -1
  248. package/lib/types/index.d.ts +2 -1
  249. package/lib/types/index.d.ts.map +1 -1
  250. package/lib/types/types.d.ts +12 -305
  251. package/lib/types/types.d.ts.map +1 -1
  252. package/lib/types/without-parser.d.ts +2 -0
  253. package/lib/types/without-parser.d.ts.map +1 -1
  254. package/package.json +43 -19
  255. package/styles/default.css +907 -642
  256. package/styles/default.min.css +4 -2
  257. package/lib/cjs/components/Code.js +0 -15
  258. package/lib/cjs/components/Code.js.map +0 -1
  259. package/lib/cjs/containers/Servers/ServerSecurity.js +0 -101
  260. package/lib/cjs/containers/Servers/ServerSecurity.js.map +0 -1
  261. package/lib/cjs/helpers/bemClasses.js +0 -49
  262. package/lib/cjs/helpers/bemClasses.js.map +0 -1
  263. package/lib/cjs/helpers/formatJsonHighlight.js +0 -61
  264. package/lib/cjs/helpers/formatJsonHighlight.js.map +0 -1
  265. package/lib/cjs/helpers/toKebabCase.js +0 -15
  266. package/lib/cjs/helpers/toKebabCase.js.map +0 -1
  267. package/lib/esm/components/Code.js +0 -9
  268. package/lib/esm/components/Code.js.map +0 -1
  269. package/lib/esm/containers/Servers/ServerSecurity.js +0 -95
  270. package/lib/esm/containers/Servers/ServerSecurity.js.map +0 -1
  271. package/lib/esm/helpers/bemClasses.js +0 -46
  272. package/lib/esm/helpers/bemClasses.js.map +0 -1
  273. package/lib/esm/helpers/formatJsonHighlight.js +0 -57
  274. package/lib/esm/helpers/formatJsonHighlight.js.map +0 -1
  275. package/lib/esm/helpers/toKebabCase.js +0 -11
  276. package/lib/esm/helpers/toKebabCase.js.map +0 -1
  277. package/lib/types/components/Code.d.ts +0 -7
  278. package/lib/types/components/Code.d.ts.map +0 -1
  279. package/lib/types/containers/Servers/ServerSecurity.d.ts +0 -8
  280. package/lib/types/containers/Servers/ServerSecurity.d.ts.map +0 -1
  281. package/lib/types/helpers/bemClasses.d.ts +0 -14
  282. package/lib/types/helpers/bemClasses.d.ts.map +0 -1
  283. package/lib/types/helpers/formatJsonHighlight.d.ts +0 -2
  284. package/lib/types/helpers/formatJsonHighlight.d.ts.map +0 -1
  285. package/lib/types/helpers/toKebabCase.d.ts +0 -2
  286. package/lib/types/helpers/toKebabCase.d.ts.map +0 -1
package/README.md CHANGED
@@ -7,7 +7,8 @@
7
7
 
8
8
  ---
9
9
 
10
- [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg)](#contributors) ![npm](https://img.shields.io/npm/v/@asyncapi/react-component) ![npm](https://img.shields.io/npm/dt/@asyncapi/react-component)
10
+ [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg)](#contributors) ![npm](https://img.shields.io/npm/v/@asyncapi/react-component) ![npm](https://img.shields.io/npm/dt/@asyncapi/react-component) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-908a85?logo=gitpod)](https://gitpod.io/#https://github.com/asyncapi/asyncapi-react/tree/next)
11
+
11
12
 
12
13
  ## Overview
13
14
 
@@ -26,6 +27,9 @@ A official [React](https://reactjs.org/) component for AsyncAPI 2.0 specificatio
26
27
  - [Props](#props)
27
28
  - [Features](#features)
28
29
  - [Styles](#styles)
30
+ * [Default styles](#default-styles)
31
+ * [Custom styles](#custom-styles)
32
+ * [Custom logo](#custom-logo)
29
33
  - [Playground](#playground)
30
34
  - [Modules](#modules)
31
35
  - [Development](#development)
@@ -44,7 +48,7 @@ A official [React](https://reactjs.org/) component for AsyncAPI 2.0 specificatio
44
48
  Run this command to install the component in your project:
45
49
 
46
50
  ```sh
47
- npm install --save @asyncapi/react-component
51
+ npm install --save @asyncapi/react-component@next
48
52
  ```
49
53
 
50
54
  Check out this simple sandbox application that uses the React component:
@@ -96,11 +100,13 @@ render(<App />, document.getElementById("root"));
96
100
 
97
101
  ## Using in other technologies
98
102
 
99
- To check how to use web-component or use a component in Angular or in NextJS see:
103
+ To check how to use web-component or use a component in other technologies see:
100
104
 
101
- - [Web Component usage](./docs/usage/web-component.md)
102
105
  - [Using in Angular](./docs/usage/angular.md)
106
+ - [Using in Vue](./docs/usage/vue.md)
103
107
  - [Using in NextJS](./docs/usage/nextjs.md)
108
+ - [Standalone bundle usage](./docs/usage/standalone-bundle.md)
109
+ - [Web Component usage](./docs/usage/web-component.md)
104
110
 
105
111
  ## Props
106
112
 
@@ -123,6 +129,7 @@ For a list and description of features offered by the AsyncAPI React component,
123
129
 
124
130
  ## Styles
125
131
 
132
+ ### Default styles
126
133
  To use default styles import them as follows:
127
134
 
128
135
  ``` js
@@ -131,6 +138,70 @@ import "@asyncapi/react-component/styles/default.css";
131
138
  import "@asyncapi/react-component/styles/default.min.css";
132
139
  ```
133
140
 
141
+ ### Custom styles
142
+ The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling.
143
+
144
+ 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.
145
+
146
+ Example custom styles (defined in the `styles/custom.css` file):
147
+ ```css
148
+ html {
149
+ -moz-tab-size: 4;
150
+ -o-tab-size: 4;
151
+ tab-size: 4;
152
+ line-height: 1.15;
153
+ -webkit-text-size-adjust: 100%;
154
+ }
155
+
156
+ body {
157
+ margin: 0;
158
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
159
+ }
160
+ ```
161
+
162
+ If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.
163
+
164
+ ``` js
165
+ import "styles/custom.css";
166
+ import "@asyncapi/react-component/styles/default.min.css";
167
+ ```
168
+
169
+ If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you can put the custom styles as a style sheet link or as an inline style in the `<head>` section of the HTML code:
170
+
171
+ ```html
172
+ <head>
173
+ <!-- Custom style sheet -->
174
+ <link rel="stylesheet" href="./styles/custom.css">
175
+
176
+ <!-- OR as inline style -->
177
+ <style>
178
+ html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
179
+ body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
180
+ </style>
181
+
182
+ <link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/styles/default.min.css">
183
+
184
+ ...
185
+ </head>
186
+ ```
187
+
188
+ ### Custom logo
189
+
190
+ The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the [InfoObject](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#infoObject), a logo will be shown in the top left corner.
191
+
192
+ > **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled.
193
+
194
+ ```yaml
195
+ asyncapi: 2.2.0
196
+ info:
197
+ title: Account Service
198
+ version: 1.0.0
199
+ description: This service is in charge of processing user signups.
200
+ x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
201
+ channels:
202
+ ...
203
+ ```
204
+
134
205
  ## Playground
135
206
 
136
207
  This repository comes in with a [Playground application](https://asyncapi.github.io/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application.