Get started 🚀

Installation

Using hosted file

The application is deployed with the client files to ease the usage.

You can always reference those files with a script tag:

Vanilla JS

<script type="module">
import { setup } from 'https://iframe.unionavatars.com/client/index.js'

const iframe = document.querySelector('iframe#id')
const client = setup(iframe)
</script>

caution

The client won't be properly set if the iframe is not yet loaded. If you have an Error about it not being loaded call setup on the onload event of the iframe

var eventer
iframe.onload = () => {
  client = setup(iframe)
}

The variable client can be used to do plain requests, or to listen for events. For a more detailed list of what can be done you can refer to the API docs.

With that client you can do things like login, change the logo with set-logo, or list the avatars with avatars.

The calls are done with the request method of the client.

const avatars = await client.request('avatars')

React

<script type="module">
import { Provider, Iframe, useIframeContext } from 'https://iframe.unionavatars.com/client/react.js'

function App () {
  const { eventer } = useIframeContext()
  const onClick = () => { eventer.request('goto', 'Register') }
  return <button onClick={onClick}>Go to register</button>
}

const reactRoot = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)
reactRoot.render(
  <Provider>
    <Iframe src="https://iframe.unionavatars.com" />
    <App />
  </Provider>
)
</script>

Vue

<script type="module">
import { createApp, defineComponent } from 'vue'
import { Plugin, Iframe, useIframeContext } from 'https://iframe.unionavatars.com/client/vue.js'

const component = defineComponent({
  template: `
    <Iframe src="https://iframe.unionavatars.com" />
    <button @click="goToRegister">Go to register</button>
  `,
  setup () {
    const ctx = useIframeContext()
    return {
      goToRegister () {
        ctx?.eventer?.request('goto', 'Register')
      }
    }
  }
})

const app = createApp(component)
app.use(Plugin({ ...initialOptions }))
app.mount('#root')
</script>

Using npm package

Create a new react project with Vite

yarn create vite example

Include the npm package for the @unionavatars/iframe.

yarn add @unionavatars/iframe

Go to the src/main.tsx file and paste this.

Vanilla JS

<iframe id="id" src="https://iframe.unionavatars.com" />
<button id="goto-register" />
<script type="module">
import { setup } from '@unionavatars/iframe'

const iframe = document.querySelector('iframe#id')
const client = setup(iframe)

document.querySelector('button#goto-register').onclick = () => {
  client.request('goto', 'Register')
}
</script>

React

<script type="module">
import { Provider, Iframe, useIframeContext } from '@unionavatars/iframe/react'

function App () {
  const { eventer } = useIframeContext()
  const onClick = () => { eventer.request('goto', 'Register') }
  return <button onClick={onClick}>Go to register</button>
}

const reactRoot = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)
reactRoot.render(
  <Provider>
    <Iframe src="https://iframe.unionavatars.com" />
    <App />
  </Provider>
)
</script>

Vue

<script type="module">
import { createApp, defineComponent } from 'vue'
import { Plugin, Iframe, useIframeContext } from '@unionavatars/iframe/vue'

const component = defineComponent({
  template: `
    <Iframe src="https://iframe.unionavatars.com" />
    <button @click="goToRegister">Go to register</button>
  `,
  setup () {
    const ctx = useIframeContext()
    return {
      goToRegister () {
        ctx?.eventer?.request('goto', 'Register')
      }
    }
  }
})

const app = createApp(component)
app.use(Plugin())
app.mount('#root')
</script>

On the browser you will see something like this:

Press the button to verify it's working

Examples

Some more detailed examples are hosted here: https://github.com/LinkingRealities/iframe-examples

Getting to know more about the API

More information on what can be done with the client inside the Api section.