@mymonero/mymonero-web-components
v3.0.3
Published
This npm package contains a number of Lit web components.
Downloads
117
Readme
#MyMonero Web Components plugin
This npm module is a collection of Lit-based web components. These components are used by the desktop, Android and web versions of the MyMonero wallet.
The package is comprised of the following components:
- Activity Indicator
<activity-indicator>
- A generic, customisable activity indicator component - Provider Card
<provider-card>
- A UI component used to display MyMonero's various Exchange service providers - Searchable Select
<searchable-select>
- A dropdown-based searchable select web component - Wallet Selector
<wallet-selector>
- A component that renders a list of XMR wallets
Installation
npm i @mymonero/mymonero-web-components
Usage
To make use of these components, import this module the same way you would a normal NPM package.
In your javascript file:
require('@mymonero/mymonero-web-components');
This will register the web component custom element tags, making them available for use in your HTML DOM
Then, in your HTML, use any of the custom elements like so:
<activity-indicator></activity-indicator>
Detailed usage documentation
Activity Indicator
Shows an animated indicator alongside an optional text message.
<activity-indicator .loadingText=${"Loading supported currencies"}></activity-indicator>
Suggested usage of this element would include a conditional expression to specify whether it should be hidden or not. For example:
<activity-indicator ?hidden=${this.hideActivityIndicator}></activity-indicator>
Provider Card
<provider-card .service=${service}></provider-card>
.service should be a JSON object in the following format:
{
service_provider: "localmonero",
title: "Buy Monero using LocalMonero",
description: "Long description text"
}
Searchable Select
A drop-down based select input field. Pass a list of your values in the following format:
[
{
label: "Text to show inside <option> tag",
value: "Value for `<option value=${value}>`"
}
]
<searchable-select .values=${fiatCurrencies}></searchable-select>
Emits the event searchable-select-update
once a user selects a value
Wallet selector
<wallet-selector></wallet-selector>