@playcanvas/react
Version:
A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.
41 lines • 1.93 kB
JavaScript
"use client";
import { useComponent } from "../hooks/index.js";
import { Entity } from "playcanvas";
import { validatePropsWithDefaults, createComponentDefinition, getStaticNullApplication } from "../utils/validation.js";
/**
* The Screen component allows an entity to render a 2D screen space UI element.
* This is useful for creating UI elements that are rendered in screen space rather than world space.
*
* @param {ScreenProps} props - The props to pass to the screen component.
* @see https://api.playcanvas.com/engine/classes/ScreenComponent.html
*
* @example
* <Entity>
* <Screen screenSpace={true} />
* </Entity>
*/
export const Screen = (props) => {
const safeProps = validatePropsWithDefaults(props, componentDefinition);
useComponent("screen", safeProps, componentDefinition.schema);
return null;
};
const componentDefinition = createComponentDefinition("Screen", () => new Entity("mock-screen", getStaticNullApplication()).addComponent("screen"), (component) => component.system.destroy(), "ScreenComponent");
componentDefinition.schema = {
...componentDefinition.schema,
screenSpace: {
validate: (value) => typeof value === "boolean",
errorMsg: (value) => `Invalid value for prop "screenSpace": ${value}. Expected a boolean.`,
default: true
},
referenceResolution: {
validate: (value) => Array.isArray(value) && value.length === 2 && value.every(v => typeof v === "number"),
errorMsg: (value) => `Invalid value for prop "referenceResolution": ${value}. Expected a tuple of [number, number].`,
default: [1280, 720]
},
scaleMode: {
validate: (value) => typeof value === "string" && ["blend", "stretch", "fit"].includes(value),
errorMsg: (value) => `Invalid value for prop "scaleMode": ${value}. Expected one of: "blend", "stretch", "fit".`,
default: "blend"
}
};
//# sourceMappingURL=Screen.js.map