Resium
Home
Installation
Getting StartedGuide
Components
ExamplesAdvancedGet Cesium context with your componentDefine a new Cesium componentMigration GuideContribution

Advanced

Get Cesium context with your component

useCesium hooks is available with Resium:

import { useCesium } from "resium";
const ExampleComponent = () => {
const context = useCesium();
return (
<p>Cesium Viewer object is{context.viewer ? "" : " not"} provided here.</p>
);
};
export default ExampleComponent;

In TypeScript:

import { useCesium } from "resium";
const ExampleComponent = () => {
const context = useCesium<{ viewer?: Cesium.Viewer }>();
return (
<p>Cesium Viewer object is{context.viewer ? "" : " not"} provided here.</p>
);
};
export default ExampleComponent;

Structure of the context is as following. It changes according to the location of the component.

{
viewer: Cesium.Viewer | undefined,
cesiumWidget: Cesium.CesiumWidget | undefined,
scene: Cesium.Scene | undefined
// ...
}

Define a new Cesium component

createCesiumComponent function is available in Resium. For details refer to source codes of components in src.