@asyncapi/react-component 1.0.0-next.32 → 1.0.0-next.35
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.
- package/README.md +68 -0
- package/browser/index.js +6 -6
- package/browser/standalone/index.js +10 -10
- package/browser/standalone/without-parser.js +8 -8
- package/browser/without-parser.js +4 -4
- package/lib/cjs/components/Schema.js +6 -2
- package/lib/cjs/components/Schema.js.map +1 -1
- package/lib/cjs/components/index.js +5 -1
- package/lib/cjs/components/index.js.map +1 -1
- package/lib/cjs/config/index.js +5 -1
- package/lib/cjs/config/index.js.map +1 -1
- package/lib/cjs/containers/AsyncApi/AsyncApi.js +5 -1
- package/lib/cjs/containers/AsyncApi/AsyncApi.js.map +1 -1
- package/lib/cjs/containers/AsyncApi/Layout.js +5 -1
- package/lib/cjs/containers/AsyncApi/Layout.js.map +1 -1
- package/lib/cjs/containers/AsyncApi/Standalone.js +5 -1
- package/lib/cjs/containers/AsyncApi/Standalone.js.map +1 -1
- package/lib/cjs/containers/Messages/MessageExample.js +5 -1
- package/lib/cjs/containers/Messages/MessageExample.js.map +1 -1
- package/lib/cjs/containers/Sidebar/Sidebar.js +5 -1
- package/lib/cjs/containers/Sidebar/Sidebar.js.map +1 -1
- package/lib/cjs/contexts/index.js +5 -1
- package/lib/cjs/contexts/index.js.map +1 -1
- package/lib/cjs/contexts/useSpec.js +5 -1
- package/lib/cjs/contexts/useSpec.js.map +1 -1
- package/lib/cjs/helpers/index.js +5 -1
- package/lib/cjs/helpers/index.js.map +1 -1
- package/lib/esm/components/Schema.js +1 -1
- package/lib/esm/components/Schema.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -27,6 +27,9 @@ A official [React](https://reactjs.org/) component for AsyncAPI 2.0 specificatio
|
|
|
27
27
|
- [Props](#props)
|
|
28
28
|
- [Features](#features)
|
|
29
29
|
- [Styles](#styles)
|
|
30
|
+
* [Default styles](#default-styles)
|
|
31
|
+
* [Custom styles](#custom-styles)
|
|
32
|
+
* [Custom logo](#custom-logo)
|
|
30
33
|
- [Playground](#playground)
|
|
31
34
|
- [Modules](#modules)
|
|
32
35
|
- [Development](#development)
|
|
@@ -126,6 +129,7 @@ For a list and description of features offered by the AsyncAPI React component,
|
|
|
126
129
|
|
|
127
130
|
## Styles
|
|
128
131
|
|
|
132
|
+
### Default styles
|
|
129
133
|
To use default styles import them as follows:
|
|
130
134
|
|
|
131
135
|
``` js
|
|
@@ -134,6 +138,70 @@ import "@asyncapi/react-component/styles/default.css";
|
|
|
134
138
|
import "@asyncapi/react-component/styles/default.min.css";
|
|
135
139
|
```
|
|
136
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
|
+
|
|
137
205
|
## Playground
|
|
138
206
|
|
|
139
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.
|