import React, { createContext, useContext } from 'react'
import { createRoot } from 'react-dom/client'
import type { Context, FunctionComponent } from 'react'
export const loadComponent = (containerId: string, Component: FunctionComponent): void => {
const container = document.getElementById(containerId)
if (container) {
const root = createRoot(container)
root.render(<Component />)
} else {
console.error(`Could not find element #${containerId}.`)
}
}
export const createContextHook = <T, >(hookName: string): [
Context<T | undefined>,
() => T
] => {
const Context = createContext<T | undefined>(undefined)
const useContextHook = (): T => {
const value = useContext(Context)
if (value === undefined) {
throw Error(`${hookName} can only be used within a corresponding context provider.`)
}
return value
}
return [Context, useContextHook]
}