@aioha/react-ui NPM

Aioha React UI

Opinionated React modal UI for Hive logins through Aioha, styled using Tailwind CSS. This provides a quick and easy way to bootstrap a React web app with ready to use Aioha-powered modal component.

Installation

pnpm i @aioha/react-ui @aioha/aioha

Usage

Initialize Aioha and setup the provider at the root of your application. This may be in index.jsx, index.tsx or App.tsx depending on the framework you use.

import { initAioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-ui'

// See options: https://aioha.dev/docs/core/usage#instantiation
const aioha = initAioha()

const App = () => {
  return (
    <AiohaProvider aioha={aioha}>
      <TheRestOfYourApplication />
    </AiohaProvider>
  )
}

Use the modal component and the useAioha() hook anywhere within AiohaProvider.

If your application is primarily styled using Tailwind CSS, it is not required to import @aioha/react-ui/dist/build.css.

import { useState } from 'react'
import { useAioha, AiohaModal } from '@aioha/react-ui'
import { KeyTypes } from '@aioha/aioha'
import { Button, useColorMode } from '@chakra-ui/react'
import '@aioha/react-ui/dist/build.css'

export const AiohaPage = () => {
  const { colorMode } = useColorMode()
  const [modalDisplayed, setModalDisplayed] = useState(false)
  const { user } = useAioha()
  return (
    <>
      <Button onClick={() => setModalDisplayed(true)}>
        {user ?? 'Connect Wallet'}
      </Button>
      <div className={colorMode}>
        <AiohaModal
          displayed={modalDisplayed}
          loginOptions={{
            msg: 'Login',
            keyType: KeyTypes.Posting
          }}
          onLogin={console.log}
          onClose={setModalDisplayed}
        />
      </div>
    </>
  )
}

`AiohaModal` component

Property	Required?	Description	Default
`displayed`	✅	Boolean of whether the modal is displayed.	false
`loginTitle`	❌	Login title to be displayed.	Connect Wallet
`loginHelpUrl`	❌	Help URL to be linked under provider selection view, if any.	undefined
`loginOptions`	✅	Aioha login options. See available configuration here.
`onLogin`	❌	Callback function to be called upon successful login, if any. Parameter contains login result as defined here.
`onClose`	✅	Function to be called to close the modal.
`imageServer`	❌	Image server URL for user avatar.	https://images.hive.blog
`explorerUrl`	❌	Hive block explorer URL.	https://hivehub.dev