# code-snippets/trunk/js/utils/bootstrap.tsx

Code Snippets, version trunk. 34 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/trunk/code/js/utils/bootstrap.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/trunk/raw/js/utils/bootstrap.tsx
- Modified: 2026-06-19T15:56:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/trunk/code/js/utils/bootstrap.tsx#L10-L20`.

```tsx
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]
}

```