Skip to main content

React Provider

For React apps that are not using the ready-made UI.

note

This module is used and provided in the ready-made UI so there is no need to install this separately.

Installation​

pnpm i @aioha/react-provider @aioha/aioha

Usage​

  1. 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.
src/App.tsx
import { initAioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-provider'

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

const App = () => {
  return (
    <AiohaProvider aioha={aioha}>
      <TheRestOfYourApplication />
    </AiohaProvider>
  )
}
  1. Use Aioha anywhere within AiohaProvider through useAioha().
src/components/AiohaPage.tsx
import { useAioha } from '@aioha/react-provider'

export const AiohaPage = () => {
  const { aioha, user, provider } = useAioha()

  // rest of your page goes here
}

Logged in username and provider may be retrieved through user and provider variables.

SSR Apps​

If you are using a framework that uses SSR (server-side rendering) such as Next.js, you may need to setup Aioha separately in a useEffect().

src/App.tsx
import React, { useEffect } from 'react'
import { Aioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-provider'

const aioha = new Aioha()

const App = () => {
  useEffect({
    // See options: https://aioha.dev/docs/core/usage#instantiation
    aioha.setup()
  }, [])
  return (
    <AiohaProvider aioha={aioha}>
      <TheRestOfYourApplication />
    </AiohaProvider>
  )
}