As promised in our presentation, we announce the release of Aioha web components that can be used in vanilla HTML/JS or any web framework to easily integrate Hive logins with 6 authentication providers including all the UI components and logic required.
Built using Lit and adapted from our React UI, the modal web component uses shadow DOM by default to ensure consistent styling regardless of how the rest of the application are styled.
This allows developers to quickly bootstrap an Aioha-powered Hive app using any framework in less than 5 minutes.
Installation
pnpm i @aioha/lit-ui @aioha/aioha
Or import from the CDN:
<script type="importmap">
{
"imports": {
"@aioha/aioha": "https://unpkg.com/@aioha/aioha@latest/dist/bundle.js",
"@aioha/lit-ui": "https://unpkg.com/@aioha/lit-ui@latest/dist/bundle.min.js"
}
}
</script>
Usage
It takes no more than 5 lines of JavaScript code and one line of HTML to integrate the Aioha modal web components in your application. The full example usage may be found here.
<html>
<body>
<button id="connectButton" type="button">Connect Wallet</button>
<div id="loginModal"></div>
<body>
<script type="module">
import { initAioha, KeyTypes } from '@aioha/aioha'
import { initModal } from '@aioha/lit-ui'
// Initialize Aioha
const aioha = initAioha()
// Initialize modal UI in a div
const modal = initModal(aioha, document.getElementById('loginModal'), {
loginOptions: {
// see available config here: https://aioha.dev/docs/core/usage#login
}
})
// Show modal on button click
document.getElementById('connectButton').addEventListener('click', () => (modal.displayed = true))
</script>
</html>
For more details on the web components, please refer to the documentation.
Bundle size
| Bundle Name | Uncompressed Size | gzipped |
|---|---|---|
| bundle.min.js | 193 KiB | 61 KiB |
Links
Landing page and docs: https://aioha.dev
Github: https://github.com/aioha-hive
NPM: https://www.npmjs.com/package/@aioha/aioha
Sting: https://chat.peakd.com/t/hive-169420/0