Set of ready-to-use web components.

The use of widgets is practically plug-n-play, no development is required from the tech team, only configuration.

Setup

Add the ARN components package to the dependencies of your package.json. As this packages relies on ARN Client, you’ll need to install it too. For instance:

{
  "dependencies": {
    **"@arianee/arn-client": "^2.2.18",
    "@arianee/arn-components": "^2.2.18",
    "@arianee/arn-types": "^2.2.18",**
    "@wagmi/core": "1.0.6"
****  }
}

As ARN Components call an ARN Client under the hood, you’ll need to make sure one is available in the global scope. See the ARN Client user guide to do so.

Usage

Import the ARN Components package to make sure its code will be packaged as part as your application’s code.

import '@arianee/arn-components';

You can then use ARN Components tags in your HTML.

If you’re using a framework to develop your web app, you might need to set up extra configuration:

Angular:
- Angular won’t allow non-Angular custom tags unless you add CUSTOM_ELEMENTS_SCHEMA in the schemas array of the relevant @NgModule or @Component.
- In case you need to provide attributes to ARN Components, use the [attr.someattribute] syntax to set non-Angular attributes.
Vue.js:
- Avoid to defined Vue components that have the same name as the ARN web components (for instance avoid an ArnConnect.vue component). Otherwise the Vue.js runtime will enter an infinite loop.
- To avoid warnings, make sure to declare the your app contains custom-elements starting with arn- in your compiler options.

For a set of examples with various tech stacks, check out the arn-example repository.

Then you can use the following ARN custom elements in your HTML pages: