React API Reference

API Index

• createReactAdapter(): creates the React mounting adapter
• ReactAdapterError: reports React mounting errors
• TypeScript types: public React adapter types

createReactAdapter()

Creates a Makoo adapter that mounts React components.

Type

function createReactAdapter(): ReactMountAdapter;

Returns

Returns ReactMountAdapter.

Details

The adapter uses createRoot() to render a component into the task's mountPoint and passes makoo as component props. It calls unmount() on the React root when the task is unmounted.

Mounting or unmounting failures throw ReactAdapterError.

Example

import { createMakoo, inject } from '@makoojs/core';
import { createReactAdapter } from '@makoojs/react';
import Panel from './Panel.tsx';

const makoo = createMakoo({
	adapters: [createReactAdapter()]
});

makoo.start([
	inject({ injectAt: '#app', artifact: Panel })
]);

ReactAdapterError

Error class used when the React adapter cannot mount or unmount a component. It extends AdapterError.

Type

class ReactAdapterError extends AdapterError {
	constructor(
		message: string,
		issues?: MakooIssue[],
		code?: string,
		cause?: Error
	);
}

When code is omitted, it defaults to ErrorCode.ADAPTER_MOUNT_FAIL.

TypeScript types

ReactMountProps

Props received by the React root component.

type ReactMountProps = {
	makoo: MakooContext;
};

ReactMountArtifact

Component types accepted by the Makoo React adapter.

type ReactMountArtifact =
	| ComponentType<ReactMountProps>
	| ExoticComponent<ReactMountProps>;

ReactMountRoot

type ReactMountRoot = Root;

ReactMountAdapter

type ReactMountAdapter = ResolvableMountAdapter<
	ReactMountArtifact,
	ReactMountRoot,
	undefined
>;

See Component Injection for a component example and the makoo prop. See MakooContext for the full method reference.