diff --git a/README.md b/README.md index b1622b7d5..b214506a7 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ To check how to use web-component or use a component in other technologies see: - [Using in Angular](./docs/usage/angular.md) - [Using in Vue](./docs/usage/vue.md) - [Using in NextJS](./docs/usage/nextjs.md) +- [Standalone bundle usage](./docs/usage/standalone-bundle.md) - [Web Component usage](./docs/usage/web-component.md) ## Props diff --git a/docs/README.md b/docs/README.md index 07f600700..4cd2e0952 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,4 +13,5 @@ This directory contains the following documents that relate to the project: - [Using in Angular](./usage/angular.md) describes how to use the AsyncAPI component in Angular project. - [Using in Vue](./usage/vue.md) describes how to use the AsyncAPI component in Vue project. - [Using in NextJS](./usage/nextjs.md) describes how to use the AsyncAPI component in NextJS project. + - [Standalone bundle usage](./usage/standalone-bundle.md) describes how to use the Standalone Bundle of AsyncAPI component with [ReactDOM](https://reactjs.org/docs/react-dom.html) package onboard. - [Web Component usage](./usage/web-component.md) describes how to use the `web-component`. diff --git a/docs/usage/angular.md b/docs/usage/angular.md index 56683981d..3e61e705e 100644 --- a/docs/usage/angular.md +++ b/docs/usage/angular.md @@ -5,7 +5,7 @@ If you wanna use the React AsyncAPI component in your Angular project, you have - you may want to use the `AsyncApiStandalone` bundle with `React` and `ReactDom` onboard (preferred option). - you may want to use the `@asyncapi/web-component` component as a plain web component. -## AsyncApi standalone bundle +## Standalone Bundle ### Prerequisites diff --git a/docs/usage/standalone-bundle.md b/docs/usage/standalone-bundle.md new file mode 100644 index 000000000..95d82f762 --- /dev/null +++ b/docs/usage/standalone-bundle.md @@ -0,0 +1,60 @@ +# Standalone bundle + +If you are not using React you may want to use the Standalone Bundle of AsyncAPI component with [ReactDOM](https://reactjs.org/docs/react-dom.html) package onboard. It makes it possible to render a component in any other web framework of your choice or in the static HTML webpage. + +## Installation + +Run this command to install the component in your project: + +```sh +npm install --save @asyncapi/react-component +``` + +## Usage in frameworks + +Check how to use the Standalone bundle in: + +- [Angular](./angular.md#standalone-bundle) +- [Vue](./vue.md) + +## Usage in HTML webpage + +```html + + + + + + + +
+ + + + + + +``` + +The Standalone Bundle exports two functions: + +- `render`, which works like [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render) function, where first argument is the [props for component](../../Readme.md#props) and the second is the HTML Node, +- `hydrate`, which works like [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) function, where first argument is the [props for component](../../Readme.md#props) and the second is the HTML Node. + +> **NOTE**: The Standalone Bundle takes this [same props](../../Readme.md#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](https://github.com/asyncapi/parser-js) inside component, you can use the bundle from `.../browser/standalone/without-parser.js` path of the package. \ No newline at end of file diff --git a/docs/usage/web-component.md b/docs/usage/web-component.md index d907b6aae..2402e8b04 100644 --- a/docs/usage/web-component.md +++ b/docs/usage/web-component.md @@ -14,7 +14,13 @@ Check out this simple sandbox application that uses the Web Component in Angular [![Edit asyncapi-web-component-in-action](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/asyncapi-web-component-in-action-l652x) -## Usage +## Usage in frameworks + +Check how to use the Web Component in: + +- [Angular](./angular.md#web-component) + +## Usage in HTML webpage ```html @@ -23,6 +29,7 @@ Check out this simple sandbox application that uses the Web Component in Angular cssImportPath="https://unpkg.com/@asyncapi/react-component@0.24.0/styles/default.min.css"> @@ -30,7 +37,7 @@ Check out this simple sandbox application that uses the Web Component in Angular > **NOTE**: [webcomponentsjs](https://www.npmjs.com/package/@webcomponents/webcomponentsjs) is a series of polyfills to make code runnable in old browsers. It is **optional** if you do not intend to support any. -> **NOTE**: If a Web Component is called with no properties at all, error will be shown on page. +> **NOTE**: If a Web Component is called with no properties at all, the error will be shown on the page. > **NOTE**: If there are several Web Components on one page, each one will be rendered using its own properties. @@ -40,7 +47,7 @@ When invoked as an independent entity, Web Component takes the following props ( - `schema` is a `schema` property from the React component, > **NOTE**: Since version 0.19.0 specifying a `schema` object can be omitted. `schema.url` and `schema.requestOptions` can be replaced with `schemaUrl` and `schemaFetchOptions` properties accordingly. -- `config` is an **optional** `config` property from the React component, +- `config` is an **optional** `config` property from the React component in the stringified JSON format, - `schemaUrl` property is a `string`, specific to Web Component, containing a URL to fetch an AsyncAPI Schema from. It is a wrapper for `schema.url` property in `schema` object under the hood, > **NOTE**: If `schemaUrl` property is specified, the `schema.url` property of the React component will be ignored. - `schemaFetchOptions` property is an **optional** `object` of [RequestInit](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html) type in JSON format, specific to Web Component, containing additional fetching options. It is a wrapper for `schema.requestOptions` property in `schema` object, which are both needed only in case process of fetching from a URL is any different from a usual browser request,